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图 3-8 色彩 的 明度 变化 


图 3-1 阳光 被 分 解 后 的 7 种 主要 颜色 


图 3-7 十 二 基本 色相 图 3-9 同一 色彩 的 明暗 变化 图 3-10 色彩 的 纯度 变化 


图 3-12 以 黄色 为 主 的 网 页 图 3-13 以 蓝 色 为 主 的 网 页 


图 3-14 以 绿色 为 主 的 网 页 
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图 3-15 以 紫色 为 主 的 网 页 


图 3-16 以 橙色 为 主 的 网 页 


图 3-17 以 黑色 与 灰色 为 主 的 网 页 图 3-18 以 灰色 为 主 的 网 页 


图 3-20 色彩 的 独特 性 图 3-21 色彩 的 适合 性 图 3-22 使 用 同一 种 色彩 搭配 的 网 页 示例 
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图 3-23 色 环 图 3-24 原色 对 比 搭配 


图 3-25 互补 色 图 3-26 补 色 对 比 应 用 图 3-27 间 色 对 比 


图 3-29 色彩 的 面积 对 比 图 3-30 色彩 的 数量 不 超过 3 种 


图 3-31 ColorJack 配色 工具 图 3-32 辅助 色 
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内 容 简介 

网 页 设计 与 网 站 建设 工作 是 目前 最 受 欢 迎 的 技术 职位 之 一 ， 本 书 由 浅 入 深 、 循 序 渐进 地 向 读者 介绍 
了 网 页 设计 与 网 站 建设 的 各 种 相关 技术 ， 最 终 目 的 是 使 读者 能 够 胜任 网 页 设计 与 网 站 建设 这 项 工作 ， 同 
时 达到 能 够 独立 开发 网 站 的 水 平 。 

本 书 共 33 章 , 以 “网 页 设计 与 网 站 建设 入 门 ” 一 “网 页 的 排版 与 制作 ”一 “设计 精彩 的 网 页 图 像 ” 一 “ 设 
计 网 页 动画 ”一 “HTML 网 站 开发 ”一 “JavaScript 网 页 特效 ”一 “动态 网 站 开发 ”一 “网 站 发 布 维护 与 
推广 ”一 “网 站 综合 案例 ”为 线索 具体 展开 ， 循 序 渐进 地 讲述 了 网 页 设计 与 网 站 建设 方方面面 的 知识 。 
内 容 全 面 涵盖 网 站 的 策划 、 网 页 的 布局 与 色彩 、Dreamweaver、Photoshop、Flash、HTML、CSS、DIV+CSS 
布局 、HTML 5、JavaScript、ASP、VBScript、 网 站 的 维护 、 网 站 的 推广 与 SE0 等 技术 。 


本 书 知识 全 面 实 用 、 易 懂 ， 让 读者 轻松 实现 自己 拥有 网 站 的 梦想 。 本 书 可 作为 大 专 院 校 、 高 职高 专 、 
中 等 职业 学 校 计算 机 专业 的 教材 ， 各 种 计算 机 培训 班 的 培训 教材 ， 也 可 以 作为 想 学 习 网 页 制作 与 网 站 建 
设 自 学 者 的 参考 用 书 。 
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随 着 网 站 技术 的 发 展 , 网 站 已 经 成 为 公司 、 企 业 宣传 推广 产品 及 商品 交易 的 一 种 重要 手段 。 
设计 精美 、 架 构 合理 的 网 站 对 于 提高 企业 的 知名 度 、 树 立 企业 形象 具有 重要 的 作用 。 所 以 ， 制 
作 网 站 及 维护 网 站 已 经 成 为 企业 运营 的 一 部 分 ， 这 项 工作 具有 非常 好 的 发 展 前 景 。 但 是 网 站 建 
设 是 一 门 综合 性 的 技能 ,网 站 开发 涉及 的 知识 非常 多 , 要 在 短 时 间 内 完全 掌握 几乎 是 不 可 能 的 。 
作为 一 个 合格 的 网 页 设计 与 网 站 建设 人 员 ， 必须 了 解 市 场 需求 研究 、 网 站 策划 、 网 页 图 像 设计 、 
网 页 页 面 排版 、 网 页 动画 设计 、 网 站 程序 开发 、 数 据 库 设 计 、 网 络 的 安全 、 网 站 维护 、 网 站 的 
推广 优化 等 各 方面 的 知识 。 当 前 ， 能 够 系统 地 掌握 这 些 知识 的 网 页 设计 师 相 对 较 少 。 市 场 上 虽 
然 有 不 少 网 页 制作 设计 的 图 书 ， 但 是 很 多 都 是 纯粹 地 讲解 网 页 设计 软件 Dreamweaver、Flash、 
Photoshop 等 软件 的 使 用 方法 ， 对 于 网 页 设计 和 网 站 建设 的 全 部 过 程 没有 讲述 ， 因 此 基于 网 页 
设计 与 网 站 建设 人 才 的 需求 ， 我 们 编写 了 这 一 本 书 。 


本 书 主要 内 容 : 

本 书 由 资深 网 页 设计 与 网 站 建设 专家 编写 ， 从 实用 角度 出 发 ， 全 面 、 详 细 地 介绍 了 网 页 设 
计 与 网 站 建设 的 基本 理论 、 制 作 流程 、 应 用 工具 等 内 容 。 

本 书 共 33 章 ， 以 “网 页 设计 与 网 站 建设 入 门 ” 一 “网 页 的 排版 与 制作 ”一 “设计 精彩 的 
网 页 图 像 ” 一 “设计 网 页 动画 ”一 “HTML 网 站 开发 ”一 “JavaScript 网 页 特效 ”一 “动态 网 
站 开发 ”一 “网 站 发 布 维护 与 推广 ”一 “网 站 综合 案例 ”为 线索 具体 展开 ， 循 序 渐进 地 讲述 了 
网 页 设计 与 网 站 建设 方方面面 的 知识 。 

。 ”网 页 设计 与 网 站 建设 入 门 : 包括 网 站 建设 基础 、 网 站 页 面 的 策划 与 布局 、 网 页 的 色彩 

搭配 。 

。 网 页 的 排版 与 制作 : 包括 Dreamweaver CC 的 操作 界面 、 在 Dreamweaver 中 使 用 文 

本 、 利 用 图 像 和 媒体 美化 网 页 、 创 建 网 页 链接 、 使 用 行为 添加 网 页 特效 、 利 用 表单 对 
象 创建 表单 文件 、 用 表格 排版 网 页 、 使 用 模板 和 库 、 使 用 CSS 样式 美化 网 页 、 使 用 
CSS+DIV 灵活 布局 页 面 。 

。 ”精彩 的 网 页 图 像 : 包括 网 页 图 像 设 计 软 件 Photoshop CC、 页 面 图 像 的 切割 与 优化 、 设 

计 网 站 的 图 片 元 素 。 
。 ”设计 网 页 动画 ; 包括 动画 设计 软件 Flash CC 快速 入 门 、Flash 绘图 基础 、 制 作 简单 的 
Flash 动画 、 制 作 声 音 和 视频 动画 、ActionScript 脚本 动画 。 

。 ”HTML 网 站 开发 : 包括 使 用 HTML 语言 编写 网 页 、HTML 5 的 新 特性 、HTML 5 的 结构 。 

e JavaScript 网 页 特效 : 包括 JavaScript 语法 基础 、 JavaScript 中 的 事件 、 JavaScript 中 的 

函数 和 对 象 。 

。 ”动态 网 站 开发 : 包括 动态 网 站 基础 、 动 态 网 页 开发 语言 ASP 基础 与 应 用 、 动 态 网 页 脚 

本 语言 VBScript。 


。 网 站 的 发 布 、 维 护 及 推广 : 包括 网 站 的 发 布 与 维护 、 网 站 的 宣传 推广 。 

。 ”网 站 综合 案例 : 从 综合 运用 的 方面 讲述 了 企业 网 站 的 完整 建设 过 程 。 

本 书 主要 特点 : 

。 ”网 页 类 畅销 书 ， 作 者 倾心 打造 : 作者 编写 过 多 本 网 页 设计 与 网 站 类 畅销 图 书 ， 数 十 万 
读者 已 经 购买 ， 口 碑 极 佳 。 本 书 涵 盖 了 众多 优秀 网 页 设计 师 的 宝贵 实战 经 验 ， 以 及 丰 
富 的 创作 灵感 和 设计 理念 。 

。 内容 全 面 : 全 面 涵盖 网 页 设计 与 网 站 建设 实际 工作 中 方方面面 的 技术 ， 包 括 网 站 的 策 
划 、 网 页 的 布局 与 色彩 、 Dreamweaver、Photoshop、Flash、HTML、CSS、DIV+CSS 布局 、 
HTML 5、JavaScript、ASP、VBScript、 网 站 的 维护 、 网 站 的 推广 与 SEO 等 技术 。 

。 ”实战 性 强 ， 本 书 除 技术 讲解 非常 基础 外 ， 案 例 实践 也 非常 贴近 实际 的 网 站 开发 。 掌 握 
好 本 书 中 介绍 的 知识 ， 基 本 上 可 以 胜任 一 般 的 网 站 开发 任务 。 

。 循序 渐进 ， 由 浅 入 深 : 为 了 方便 读者 学 习 ， 本 书 首先 从 基本 的 网 站 建设 常识 及 最 基础 
的 网 页 布局 和 色彩 搭配 等 知识 开始 讲解 。 在 读者 不 断 学 习 的 过 程 中 ， 逐 步 介绍 所 需要 
的 各 种 软件 工具 的 使 用 方法 及 程序 设计 语言 。 每 一 章 的 学 习 ， 都 会 使 读者 学 有 所 获 ， 
有 信心 进入 下 一 步 的 学 习 。 

。 结构 完整 : 本 书 以 实用 功能 讲解 为 核心 ， 每 小 节 分 为 基本 知识 学 习 和 综合 实战 两 部 分 ， 
基本 知识 学 习 部 分 以 基本 知识 为 主 ， 讲 解 每 个 知识 点 的 操作 和 用 法 ， 操 作 步 骤 详 细 、 
目标 明确 ， 综 合 实战 部 分 则 相当 于 一 个 学 习 任 务 或 案例 制作 。 

。 书 盘 结合 ， 交 互 学 习 : 本 书 配套 光盘 中 含有 本 书 的 相关 实例 文件 ， 内 容 丰 富 多 彩 ， 简 
洁 实用 。 光 盘 中 还 赠送 超 值 网 页 设计 视频 教学 。 


本 书 读者 对 象 : 

可 以 适用 于 以 下 读者 对 象 : 

1. 网 页 设计 与 制作 人 员 。 

2. 网 站 建设 与 开发 人 员 。 

3. 大 中 专 院 校 相关 专业 师 生 。 

4. 网 页 制作 培训 班 学 员 。 

5. 个 人 网 站 爱好 者 与 自学 读者 。 

本 书 由 国内 著名 网 页 设计 培训 专家 刘 贵 国 编写 ， 参 加 编著 的 还 包括 冯 雷 雷 、 时 辉 、 何 洁 、 
陈 石 送 、 何 琛 、 吴 秀 红 、 王 冬 霞 、 何 本 军 、 乔 海 丽 、 孙 良 军 、 邓 仰 伟 、 孙 雷 杰 、 孙 文 记 、 何 立 、 
倪 庆 军 、 胡 秀 娥 、 赵 良 涛 、 徐 曦 、 刘 桂香 、 葛 俊 科 、 葛 俊 彬 等 。 由 于 作者 水 平 有 限 ， 加 之 创作 
时 间 仓促 ， 本 书 不 足 之 处 在 所 难免 ， 欢 迎 广大 读者 批评 指正 。 
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网 页 设计 与 网 站 建设 入 门 


第 章 网 站 建设 基础 


上 网 已 成 为 当今 人 们 的 一 种 新 的 生活 方式 ， 通 过 互联 网 ， 用 户 足 不 出 户 就 可 以 浏览 全 世界 
的 信息 ， 网 站 也 成 为 了 每 个 公司 必 不 可 少 的 宣传 媒介 。 互 联网 的 迅速 发 展 使 得 网 页 设计 越 来 越 


重要 ， 要 制作 出 更 出 色 的 网 站 来 就 需要 熟悉 网 站 建设 的 基础 知识 。 这 对 以 后 的 网 站 建设 工作 有 
很 大 的 帮助 。 


合 预 备 知识 合 ” 网 站 建设 的 一 般 流程 
倒 常用 的 网 页 设计 软件 


国 预备 知识 


在 具体 学 习 网 页 设计 与 制作 前 ， 先 来 认识 一 下 什么 是 网 站 ， 什 么 是 静态 网 页 和 动态 网 页 ， 
了 解 什么 是 网 站 的 域名 和 空间 的 申请 ， 为 以 后 的 学 习 打 好 基础 。 


1.1.1 什么 是 网 站 

网 站 是 在 Intermmet 上 通过 超级 链接 的 形式 构成 的 相关 网 页 的 集合 。 简 单 地 说 ， 网 站 是 一 种 
通信 工具 ， 就 像 布 告 栏 一 样 ， 人 们 可 以 通过 网 站 来 发 布 自己 想 要 公开 的 信息 ， 或 者 利用 网 站 来 
提供 相关 的 网 上 服务 。 通 过 网 站 ， 人 们 可 以 浏览 、 获 取信 息 。 现 在 ， 许 多 公司 都 拥有 自己 的 网 
站 ， 他 们 利用 网 站 来 进行 宣传 、 产 品 资讯 发 布 、 招 聘 人 才 等 。 在 因特网 的 早期 ， 网 站 大 多 只 是 
单纯 的 文本 。 经 过 几 年 的 发 展 ， 当 万 维 网 出 现 之 后 ， 图 像 、 声 音 、 动 画 、 视 频 ， 甚 至 3D 技术 
开始 在 因特网 上 流行 起 来 ， 网 站 也 慢 慢 地 发 展 成 我 们 现在 看 到 的 图 文 并 茂 的 样子 。 通 过 动态 网 
页 技术 ， 用 户 也 可 以 与 其 他 用 户 或 者 网 站 管理 者 进行 交流 。 
网 站 由 域名 、 服 务 器 空间 、 网 页 3 部 分 组 成 。 网 站 的 域名 就 是 在 访问 网 站 时 在 浏览 器 地 址 
栏 中 输入 的 网 址 。 网 页 是 通过 Dreamweaver 等 软件 编辑 出 来 的 ， 多 个 网 页 由 超级 链接 联系 起 来 。 
然后 网 页 需要 上 传 到 服务 器 空间 中 ， 供 浏览 器 访问 网 站 中 的 内 容 。 
1.1.2 ”静态 网 页 和 动态 网 页 
页 又 称 HTML 文件 ， 是 一 种 可 以 在 WWW 上 传输 ， 能 被 浏览 器 认识 和 翻译 成 页 面 并 显 
示 出 来 的 文件 。 网 页 分 为 静态 网 页 和 动态 网 页 。 

静态 网 页 是 网 站 建设 初期 经 常 采 用 的 一 种 形式 。 网 站 建设 者 把 内 容 设计 成 静态 网 页 ， 访 问 
者 只 能 被 动 地 浏览 网 站 建设 者 提供 的 网 页 内 容 。 如 图 1-1 所 示 为 静态 的 内 容 展示 网 页 。 


图 1-1 静态 的 内 容 展示 网 页 


静态 网 页 特点 如 下 。 
。 ”网 页 内 容 不 会 发 生变 化 ， 除 非 网 页 设 
计 者 修改 了 网 页 的 内 容 。 
。 不 能 实现 和 浏览 网 页 的 用 户 之 间 的 交 
互 。 信 息 流向 是 单 向 的 ， 即 从 服务 器 
到 浏览 器 。 服 务 器 不 能 根据 用 户 的 选 
择 调整 返回 给 用 户 的 内 容 。 
所 谓 动态 网 页 是 指 网 页 文件 里 包含 了 程 
序 代码 ， 通 过 后 台数 据 库 与 Web 服务 器 的 
信息 交互 ， 由 后 台数 据 库 提供 实时 数据 更 新 
和 数据 查询 服务 。 这 种 网 页 的 后 级 名 称 一 般 
根据 不 同 的 程序 设计 语言 而 不 同 ， 如 常见 的 
有 .asp、.jsp、.php、.perl、.cgi 等 形式 为 后 级 。 
动态 网 页 能 够 根据 不 同时 间 和 不 同 访问 者 而 
显示 不 同 内 容 。 如 常见 的 新 闻 发 布 系统 、 聊 
天 系统 和 购物 系统 通常 用 动态 网 页 实现 。 如 
1-2 所 示 为 动态 购物 网 页 。 
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图 1-2 动态 购物 网 页 


动态 网 页 制作 比较 复杂 ， 需 要 用 到 
ASP、PHP、JSP 和 ASPNET 等 专门 的 动态 网 
页 设计 语言 。 
动态 网 页 的 一 般 特 点 如 下 。 
。 动态 网 页 以 数据 库 技 术 为 基础 ， 可 以 
大 大 降低 网 站 维护 的 工作 量 。 

。 ”采用 动态 网 页 技术 的 网 站 可 以 实现 更 
多 的 功能 ， 如 用 户 注册 、 用 户 登 录 、 
搜索 查询 、 用 户 管理 、 订 单 管理 等 。 

。 ”动态 网 页 并 不 是 独立 存在 于 服务 器 上 

的 网 页 文件 ， 只 有 当 用 户 请 求 服务 器 
时 才 返 回 一 个 完整 的 网 页 。 

。 动态 网 页 中 的 “? ”不 利于 搜索 引擎 
的 检索 ， 采 用 动态 网 页 的 网 站 在 进行 
搜索 引擎 推广 时 需要 做 一 定 的 技术 处 
理 才 能 适应 搜索 引擎 的 要 求 。 


1.1.3 ”申请 域名 

网 站 的 域名 就 是 在 访问 网 站 时 在 浏览 器 
地 址 栏 中 输入 的 网 址 。 

一 个 网 站 必须 有 一 个 世界 范围 内 唯一 可 
访问 的 名 称 ， 这 个 名 称 还 可 方便 地 书写 和 记 
忆 ， 这 就 是 网 站 的 域名 。 域 名 对 于 开展 电子 
商务 具有 重要 的 作用 ， 它 被 誉 为 网 络 时 代 的 
“环球 商标 ”， 一 个 好 的 域名 会 大 大 增加 企 
业 在 互联 网 上 的 知名 度 。 因 此 ， 企 业 如 何 选 
取 好 的 域名 就 显得 十 分 重要 。 

从 网 络 体系 结构 上 来 讲 ， 域 名 是 域名 管 
理 系统 (Domain Name System，DNS) 进行 
全 球 统一 管理 的 ， 用 来 映射 主机 他 地 址 的 一 
种 主机 命名 方式 。 例 如 ， 百 度 的 域名 是 www. 
baidu.com， 在 浏览 器 地 址 栏 中 输入 www. 
baidu.com 时 ， 计 算 机 会 把 这 个 域名 指向 相对 
应 的 了 地 址 。 同 样 ， 网 站 的 服务 器 空间 会 有 
一 个 下地 址 ， 还 需要 申请 一 个 便于 记忆 的 域 
名 指向 这 个 人 P 地 址 以 便 访问 。 

1. 域名 选取 原则 

在 选取 域名 的 时 候 ， 首 先 要 遵循 两 个 基 
本 原则 。 


。 域名 应 该 简明 易 记 ， 便 于 输入 。 这 是 
判断 域名 好 坏 最 重要 的 因素 。 一 个 好 
的 域名 应 该 短 而 顺口 ， 便 于 记忆 ， 最 
好 让 人 看 一 眼 就 能 记 住 ， 而 且 读 起 来 
发 音 清晰 ,不 会 导致 拼写 错误 。 此 外 ， 
域名 选取 还 要 避免 同音 异 义 词 。 

。 ”域名 要 有 一 定 的 内 涵 和 意义 。 用 有 一 
定 意义 和 内 涵 的 词 或 词组 作 域名 ， 不 
但 可 记忆 性 好 ， 而 且 有 助 于 实现 企业 
的 营销 目标 。 如 企业 的 名 称 、 产 品名 
称 、 商 标 名 、 品 牌 名 等 都 是 不 错 的 选 
择 ， 这 样 能 够 使 企业 的 网 络 营销 目标 
和 非 网 络 营销 目标 达成 一 致 。 

提示 

选取 域名 时 有 以 下 常用 的 技巧 : 

。 ”用 企业 名 称 的 汉语 拼音 作为 域名 ; 

。 ”用 企业 名 称 相应 的 英文 名 作为 域名 ; 

。 ”用 企业 名 称 的 缩写 作为 域名 ; 

。 用 汉语 拼音 的 谐音 形式 给 企业 注 
册 域 名 ; 

。 以 中 英文 结合 的 形式 给 企业 注册 
域名 ; 

。 在 企业 名 称 前 后 加 上 与 网 络 相关 

的 前 级 和 后 级; 

。 用 与 企业 名 不 同 但 有 相关 性 的 词 
或 词组 作 域 名 ; 

。 不 要 注册 其 他 公司 拥有 的 独特 商 
标 名 和 国际 知名 企业 的 商标 名 。 


2. 网 站 域名 类 型 

一 个 域名 是 分 为 多 个 字段 的 ， 如 www. 
sina.com.cn， 这 个 域名 分 为 4 个 字段 。cn 是 
一 个 国家 字段 ， 表 示 域 名 是 中 国 的 ，com 表 
示 域 名 的 类 型 ， 表 示 这 个 域名 是 公共 服务 类 
的 域名 ; www 表示 域名 提供 www 网 站 服务 ; 
sina 表示 这 个 域名 的 名 称 。 域 名 中 的 最 后 一 个 
字段 ， 一 般 是 国家 字段 。 表 1-1 为 一 些 常见 的 
域名 后 缀 类型。 对 于 .gov 政府 域名 、.edu 教 
育 域名 等 类 型 的 域名 ， 需 要 这 些 有 相关 资质 
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的 机 构 提 供 有 效 的 证 明 材料 才 可 以 申请 和 注 
册 。 
表 1-1 常用 的 域名 字段 
类 型 
商业 机 构 域名 
网 络 服务 机 构 域名 
非 营 利 性 组 织 


手机 和 移动 网 站 域名 

3. 申请 域名 

域名 是 由 国际 域名 管理 组 织 或 国内 的 相 
关机 构 统 一 管理 的 。 有 很 多 网 络 公司 可 以 代 
理 域名 的 注册 业务 ， 可 以 直接 在 这 些 网 络 公 
司 注册 一 个 域名 。 注 册 域 名 时 ， 需 要 找到 服 
务 较 好 的 域名 代理 商 进行 注册 。 

可 以 在 搜索 引擎 上 查找 到 域名 代理 商 ， 
如 图 1-3 所 示 , 可 以 在 百度 中 查找 域名 代理 商 。 


-Dobi 


图 1-3 查找 到 域名 代理 商 


在 百度 中 打开 中 国 万 网 的 网 站 (http:// 
www.net.cn) ， 在 这 里 可 以 申请 注册 域名 ， 如 
图 1-4 所 示 。 


云 二 主机 a eb 志 


图 1-4 在 万 网 申请 注册 域名 


1.1.4 ”申请 服务 器 空间 

访问 网 站 的 过 程 实际 上 就 是 用 户 计算 机 
和 服务 器 进行 数据 连接 和 数据 传递 的 过 程 ， 
这 就 要 求 网 站 必须 存放 在 服务 器 上 才能 被 访 
问 。 一 般 的 网 站 , 不 是 使 用 一 个 独立 的 服务 器 ， 
而 是 在 网 络 公司 租用 一 定 大 小 的 储存 空间 来 
支持 网 站 的 运行 。 这 个 租用 的 网 站 存储 空间 
就 是 服务 器 空间 。 如 图 1-5 所 示 在 万 网 申请 服 
务 器 空间 。 


图 1-5 在 万 网 申请 服务 器 空间 

1. 为 什么 要 申请 服务 器 空间 

一 个 小 的 网 站 直接 放 在 独立 的 服务 器 上 
是 不 实际 的 ， 实 现 方法 是 在 商用 服务 器 上 租 
用 一 块 服务 器 空间 ， 每 年 定期 支付 很 少 的 服 


务 器 租用 费 即 可 把 自己 的 网 站 放 在 服务 器 上 
运行 。 租 用 的 服务 器 空间 ， 用 户 只 需要 管理 
和 更 新 自己 的 网 站 ， 服 务 器 的 维护 和 管理 则 
由 网 络 公 司 完 成 。 
在 租用 服务 器 空间 时 需要 选择 服务 较 好 的 
网 络 公司 。 好 的 服务 器 空间 运行 稳定 ， 很 少 出 
现 服务 器 停机 现象 ， 有 很 好 的 访问 速度 和 售后 
服务 。 某 些 测试 软件 可 以 方便 地 测 出 服务 器 的 
运行 速度 。 新 网 、 万 网 、 中 资源 等 公司 的 服务 
器 空间 都 有 很 好 的 性 能 和 售后 服务 。 
在 网 络 公司 主页 注册 一 个 用 户 名 并 登录 
后 ， 即 可 购买 服务 器 空间 。 在 购买 时 需要 选 
择 空间 的 大 小 和 支持 的 程序 类 型 。 
2. 服务 器 空间 的 类 型 
不 同 服务 器 空间 的 主要 区 别 是 支持 网 站 
程序 和 支持 数据 库 的 不 同 。 常 用 的 服务 器 空 
间 可 能 分 别 支 持 下 面 这 些 不 同 的 网 站 程序 。 
。 ”ASP: 使 用 Windows 系统 和 IIS 服务 
器 。 

。 PHP: 使 用 Linux 系统 或 Windows 系 
统 ， 使 用 Apache 网 站 服务 器 。 

。 .NET: 使 用 Windows 系统 和 IIS 服 
务 器 。 

。 JSP: 使 用 Windows 系统 和 Java 的 网 
站 服务 器 。 

不 同 的 服务 器 空间 可 能 支持 不 同 的 数据 
库 ， 常 用 的 服务 器 空间 支持 的 数据 库 有 以 下 


e Access: 常用 于 ASP 网 站 。 
。 SQL Server 2000: 常用 于 ASP 网 站 
或 .NET 网 站 。 
。 MySQL 数据 库 : 常用 于 PHP 或 JSP 
网 站 。 
。 Oracle 数据 库 : 常用 于 JSP 网 站 。 
在 注册 服务 器 空间 时 ， 需 要 选择 支持 自 
己 网 站 程序 与 数据 库 的 服务 器 空间 。 例 如 ， 
本 书 中 开发 的 程序 是 ASP 程序 ， 需 要 选择 
ASP 空间 。 同时 , 需要 注意 服务 器 空间 的 大 小 ， 
100MB 的 空间 即 可 存放 一 般 的 网 站 。 


网 站 的 域名 与 服务 器 空间 是 需要 每 年 按时 续费 的 。 用 户 需要 按 网 络 公司 规定 的 方式 进行 续 
费 。 域 名 和 空间 不 可 以 欠 费 ， 如 果 欠 费 ， 管 理 部 门 会 收回 这 个 域名 和 空间 ， 如 被 其 他 用 户 再 次 
注册 以 后 就 很 难 再 注册 到 这 个 域名 ， 也 可 能 导致 自己 网 站 的 数据 丢失 。 


常用 的 网 页 设计 软件 


设计 网 页 时 首先 要 选择 网 页 设计 工具 软件 。 虽 然 用 记事 本 手工 编写 源 代 码 也 能 做 出 网 页 ， 
但 这 需要 对 编程 语言 相当 了 解 ， 并 不 适合 广大 的 网 页 设计 爱好 者 。 由 于 目前 可 视 化 的 网 页 设 
计 工 具 越 来 越 多 ， 使 用 也 越 来 越 方便 ， 所 以 设计 网 页 已 经 变 成 了 一 件 轻松 的 工作 。Flash、 
Dreamweaver、Photoshop、Fireworks 这 4 个 软件 相辅相成 ， 是 设计 网 页 的 首选 工具 ， 其 中 


Dreamweaver 用 来 排版 布局 网 页 ，Flash 用 来 设计 精美 的 网 页 动画 ， 


来 处 理 网 页 中 的 图 形 图 像 。 
1.2.1 网 页 设计 软件 Dreamweaver 


使 用 Photoshop 制作 的 网 页 图 像 并 不 是 真 
正 的 网 页 ， 要 想 真 正成 为 能 够 正常 浏览 的 网 
页 ， 还 需要 用 到 Dreamweaver 进行 网 页 排版 
布局 、 添 加 各 种 网 页 特效 ， 还 可 以 轻松 开发 
新 闻 发 布 系统 、 网 上 购物 系统 、 论 坛 系统 等 

Dreamweaver CS6 是 创建 网 站 和 应 用 程序 
的 专业 之 选 。 它 组 合 了 功能 强大 的 布局 工具 、 
应 用 程序 开发 工具 和 代码 编辑 支持 工具 等 。 
Dreamweaver 的 功能 强大 而 且 稳定 ， 可 帮助 设计 
人 员 和 开发 人 员 轻 松 创建 和 管理 任何 站 点 ， 如 
图 1-6 所 示 为 Dreamweaver CC 中 文 版 工作 界面 。 


图 1-6 Dreamweaver CC 中 文 版 工作 界面 


1.2.2 图像 设计 软件 Photoshop 
网 页 中 如 果 只 是 文字 ， 则 缺少 生动 性 和 
活泼 性 ， 也 会 影响 视觉 效果 和 整个 页 面 的 美 


Photoshop 和 Fireworks 用 


观 。 因 此 在 网 页 的 制作 过 程 中 需要 插入 图 像 。 
图 像 是 网 页 中 重要 的 组 成 元 素 之 一 。 使 用 
Photoshop CC 可 以 设计 出 精美 的 网 页 图 像 。 
Photoshop 是 Adobe 公司 推出 的 图 像 处 理 
软件 。 目 前 已 被 广泛 应 用 于 平面 设计 、 网 页 
设计 和 照片 处 理 等 领域 。 随 着 计算 机 技术 的 
发 展 ，Photoshop 已 历经 数 次 版 本 更 新 ， 功 能 
越 来 越 强 大 。 如 图 1-7 所 示 是 Photoshop CC 
设计 网 页 整体 图 像 。 


图 1-7 Photoshop CC 设计 网 页 整体 图 像 


1.2.3 动画 设计 软件 Flash 


Flash 是 一 款 多 媒体 动画 制作 软件 。 它 是 
一 种 交互 式 动画 设计 工具 , 用 它 可 以 将 音乐 、 
动画 以 及 富有 新 意 的 界面 融合 在 一 起 ， 以 制 
作出 高 品质 的 动态 视听 效果 。 

由 于 良好 的 视觉 效果 ，Flash 技术 在 网 
页 设计 和 网 络 广告 中 的 应 用 非常 广泛 ， 有 些 
网 站 为 了 追求 美观 ， 甚 至 将 整个 首页 全 部 用 


5 


6 We 
网 页 设计 与 网 站 建设 完全 实战 手册 


Flash 方式 设计 。 从 浏览 者 的 角度 来 看 ，Flash 
动画 内 容 比 一 般 的 文本 和 图 片 网 页 ， 大 大 增 
加 了 艺术 效果 ， 对 于 展示 产品 和 企业 形象 具 
有 明显 的 优越 性 。 如 图 1-8 所 示 使 用 Flash 制 
作 的 网 页 动画 。 


图 1-8 Flash CC 制作 的 动画 


1.2.4 ”HTML 标记 


网 页 文档 主要 是 由 HTML 构成 。 HTML 
全 名 是 Hyper Text Markup Language， 即 超 
文本 标记 语言 ， 是 用 来 描述 WWW 上 超 文 本 
文件 的 语言 。 用 它 编写 的 文件 扩展 名 是 .html 
或 .htm。 

HTML 不 是 一 种 编程 语言 ， 而 是 一 种 页 
面 描述 性 标记 语言 。 它 通过 各 种 标记 描述 不 
同 的 内 容 ， 说 明 有 段落、 标题 、 图 像 、 字 体 等 
在 浏览 器 中 的 显示 效果 。 浏 览 器 打开 HTML 


<html> 

<head> 

<title> 

</title> 

<style type="text/css"> 
2 


文件 时 ， 将 依据 HIML 标记 去 显示 内 容 。 

HTML 能 够 将 Intermet 上 不 同 服务 器 上 的 
文件 连接 起 来 ， 可 以 将 文字 、 声 音 、 图 像 、 动 
画 、 视 频 等 媒体 有 机 组 织 起 来 ， 展 现 给 用 户 
五 彩 缤纷 的 画面 ， 此 外 它 还 可 以 接受 用 户 信 
息 ， 与 数据 库 相 连 ， 实 现 用 户 的 查询 请 求 等 
交互 功能 。 

HTML 的 任何 标记 都 由 “<” 和 “>” 围 起 来 ， 
如 <HTML><I>。 在 起 始 标 记 的 标记 名 前 加 上 
符号 “/” 便 是 其 终止 标记 ， 如 </I>， 夹 在 起 
始 标记 和 终止 标记 之 间 的 内 容 受 标记 的 控制 ， 
例如 < 幸福 永远 </ 亡 , 夹 在 标记 I 之 间 的 “ 幸 
福永 远 ” 将 受 标记 I 的 控制 。HTML 文件 的 
整体 结构 也 是 如 此 ， 下 面 就 是 最 基本 的 网 页 
结构 ， 如 图 1-9 所 示 。 


Dw mo 人 


图 1-9 基本 的 网 页 结构 


body { background-image: url (images/45.gif); } 


-STYLE1 

{ color: #EF0039; 
一 -> 

</style> 

</head> 

<body> 


<span class="STYLE1"> 幸福 永远 </span> 


</body> 
</html> 


font-size: 36px; font-family: "华文 新 魏 "7} 


下 面 讲述 HTML 的 基本 结构 。 

HTML 标记 

<Html> 标记 用 于 HTML 文档 的 最 前 边 ， 
用 来 标识 HTML 文档 的 开始 。 而 </Html> 标 
记 恰 恰 相 反 ， 它 放 在 HIML 文档 的 最 后 边 ， 
用 来 标识 HTML 文档 的 结束 ， 两 个 标记 必须 
一 块 使 用 。 

Head 标记 

<head> 和 </head> 构成 HIML 文档 的 开 
头 部 分 ， 在 此 标记 对 之 间 可 以 使 用 <title></ 
title>、<script></script> 等 标记 对 ， 这 些 标记 
对 都 是 描述 HTML 文档 相关 信息 的 标记 对 ， 
<head></head> 标记 对 之 间 的 内 容 不 会 在 浏览 
器 的 框 内 显示 出 来 ,两 个 标记 必须 一 块 使 用 。 

Body 标记 

<body></body> 是 HTML 文档 的 主体 部 
分 ， 在 此 标记 对 之 间 可 包含 <p></p>、<hl></ 
hl>、<br></br> 等 众多 的 标记 ， 它 们 所 定义 
的 文本 、 图 像 等 将 会 在 浏览 器 内 显示 出 来 ， 
两 个 标记 必须 一 块 使 用 。 

Title 标记 

使 用 过 浏览 器 的 人 可 能 都 会 注意 到 浏览 
器 窗口 最 上 边 蓝 色 部 分 显示 的 文本 信息 ， 那 
些 信息 一 般 是 网 页 的 “标题 ”， 要 将 网 页 的 
标题 显示 到 浏览 器 的 顶部 其 实 很 简单 ， 只 要 


网 站 建设 的 基本 步骤 


在 <title></title> 标记 对 之 间 加 入 要 显示 的 文 
本 即 可 。 


1.2.5 FTP 软件 


网 站 制作 完毕 ， 需 要 发 布 到 Web 服务 器 
上 ， 才 能 够 让 别人 浏览 现在， 上传 网 站 的 
工具 有 很 多 ， 有 些 网 页 制作 工具 本 身 就 带 有 
FTP 功能 ， 利 用 这 些 FTP 工具 ， 可 以 很 方便 
地 把 网 站 发 布 到 服务 器 上 。 

CuteFtp 是 一 款 非 常 受 欢迎 的 FTP 工具 ， 
界面 简洁 ， 并 具有 的 支持 上 下 载 断 点 续 传 、 
操作 简单 方便 等 特征 使 其 在 众多 的 FTP 软件 
中 脱颖而出 , 无 论 是 下 载 软件 还 是 更 新 主页 ， 
CuteFtp 是 一 款 不 可 多 得 的 好 工具 。 如 图 1-10 
所 示 为 CuteFtp 软件 。 


SO 


图 1-10 CuteFtp 软件 


创建 网 站 是 一 个 系统 工程 ， 有 一 定 的 工作 流程 ， 按 部 就 班 地 来 才能 设计 出 满意 的 网 站 。 
此 在 制作 网 站 前 ， 先 要 了 解 网 站 建设 的 基本 流程 ， 这 样 才能 制作 出 更 好 、 更 合理 的 网 站 。 


1.3.1 网 站 的 定位 


在 创建 网 站 时 ， 确 定 站 点 的 目标 是 第 一 步 。 设 计 者 应 清楚 建立 站 点 的 目标 ， 即 确定 它 将 提 

供 什么 样 的 服务 ， 网 页 中 应 该 提供 哪些 内 容 等 。 要 确定 站 点 目标 ， 应 该 从 以 下 3 个 方面 考虑 。 
。 ”网 站 的 整体 定位 。 网 站 可 以 是 大 型 商用 网 站 、 小 型 电子 商务 网 站 、 门户 网 站 、 个 人 主页 、 
科研 网 站 、 交 流 平台 、 公 司 和 企业 介绍 性 网 站 、 服 务 性 网 站 等 。 首 先 应 该 对 网 站 的 整 

体 进 行 一 个 客观 的 评估 ， 同 时 要 以 发 展 的 眼光 看 待 问题 ， 否 则 将 带 来 许多 升级 和 更 新 


方面 的 不 便 。 


。 网 站 的 主要 内 容 。 如 果 是 综合 性 网 站 ， 那 么 对 于 新 闻 、 邮 件 、 电 子 商 务 、 论 坛 等 都 要 
有 所 涉及 ， 这 样 就 要 求 网 页 要 结构 紧凑 、 美 观 大 方 ; 对 于 侧重 某 一 方面 的 网 站 ， 如 书 
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籍 网 站 、 游 戏 网 站 、 音 乐 网 站 等 ， 则 
往往 对 网 页 美工 要 求 较 高 ， 使 用 模板 
较 多 ， 更 新 网 页 和 数据 库 较 快 ， 如果 
是 个 人 主页 或 介绍 性 的 网 站 ， 那 么 一 
般 来 讲 ， 网 站 的 更 新 速度 较 慢 ， 浏 览 
率 较 低 ， 并 且 由 于 链接 较 少 ， 内 容 不 
如 其 他 网 站 丰富 ， 但 对 美工 的 要 求 更 
高 一 些 , 可 以 使 用 较 鲜 艳 明亮 的 颜色 ， 
同时 可 以 添加 Flash 动画 等 ， 使 网 页 
更 具 动 感 和 充满 活力 ， 否 则 网 站 没有 
吸引 力 。 

。 ”网 站 浏览 者 的 教育 程度 。 对 于 不 同 的 
浏览 者 群 ， 网 站 的 吸引 力 是 截然 不 同 
的 ， 如 针对 少年 儿童 的 网 站 ， 卡 通 和 
科普 性 的 内 容 更 符合 浏览 者 的 品味 ， 
也 能 够 达到 网 站 寅 教 于 乐 的 目的 ; 针 
对 学 生 的 网 站 ， 往 往 对 网 站 的 动感 程 
度 和 特效 技术 要 求 更 高 一 些 ， 对 于 商 
务 浏览 者 ， 网 站 的 安全 性 和 易 用 性 更 
为 重要 。 


1.3.2 “确定 网 站 主题 


在 目标 明确 的 基础 上 ， 完 成 网 站 的 构思 
创意 即 总 体 设计 方案 。 对 网 站 的 整体 风格 和 
特色 做 出 定位 ， 规 划 网 站 的 组 织 结构 。Web 
站 点 应 针对 所 服务 对 象 的 不 同 而 具有 不 同 的 
形式 。 有 些 站 点 只 提供 简洁 的 文本 信息 ; 有 
些 则 采用 多 媒体 表现 手法 , 提供 华丽 的 图 像 、 
闪烁 的 灯光 、 复 杂 的 页 面 布 置 ， 甚 至 可 以 下 
载 声音 和 录像 片段 。 好 的 Web 站 点 还 把 图 
形 表现 手法 和 有 效 的 组 织 与 通信 结合 起 来 。 
要 做 到 主题 鲜明 突出 、 要 点 明确 ， 应 以 简单 
明确 的 语言 和 画面 体现 站 点 的 主题 。 还 要 调 
动 一 切 手段 充分 表达 站 点 的 个 性 和 情趣 ， 办 
出 网 站 的 特点 。Web 站 点 主页 应 具备 的 基本 
成 分 包括 : 页 眉 ， 准 确 无 误 地 标识 站 点 和 企 
业 标 志 ; E-mail 地 址 ， 用 来 接收 用 户 垂询 ; 
联系 信息 ， 如 普通 邮件 地 址 或 电话 ; 版 权 信 
息 ， 声 明 版 权 所 有 者 等 。 注 意 重复 利用 已 有 
信息 ， 如 客户 手册 、 公 共 关 系 文档 、 技 术 


手册 和 数据 库 等 可 以 轻而易举 地 用 到 企业 的 
Web 站 点 中 。 


1.3.3 ”网 站 整体 规划 

在 设计 网 站 以 前 需要 对 网 站 进行 整体 规 
划 和 设计 ， 写 好 网 站 项 目 设计 书 ， 在 以 后 的 
制作 中 按照 这 些 规 划 和 设计 进行 。 需 要 从 网 
站 内 容 、 网 页 美术 效果 和 网 站 程序 的 构思 3 
个 方面 进行 网 站 的 整体 规划 。 

网 站 内 容 : 在 网 站 进行 开发 以 前 ， 需 要 
构思 网 站 的 内 容 ， 需 要 突出 哪些 主要 内 容 。 
例如 个 人 网 站 ， 可 以 有 个 人 文章 、 个 人 活动 、 
生活 照片 、 才 艺 展示 、 个 人 作品 、 联 系 方式 
等 内 容 。 还 需要 明确 哪些 是 主要 内 容 ， 需 要 
在 网 站 中 突出 制作 的 重点 。 

网 页 美术 效果 : 页 面 的 美术 效果 往往 决 
定 一 个 网 站 的 档次 ， 网 站 需要 有 美观 大 方 的 
版 面 。 可 以 根据 个 人 的 喜好 、 页 面 内 容 等 设 
计 出 自己 喜欢 的 页 面 效 果 。 如 果 是 个 人 网 站 ， 
可 以 根据 个 人 的 特长 和 才艺 等 内 容 制 作出 夸 
张 的 美术 作品 式 的 网 站 。 

网 站 程序 的 构思 : 还 需要 构思 网 站 的 功 
能 ， 网 站 的 这 些 功 能 需要 由 什么 样 的 程序 来 
实现 。 如 果 是 很 简单 的 个 人 主页 ， 则 不 需要 
经 常 更 新 ， 更 不 必 编 程 做 动态 网 站 。 


1.3.4 ”收集 资料 与 素材 


网 站 的 设计 需要 相关 的 资料 和 素材 ， 丰 

富 的 内 容 才 可 以 丰富 网 站 的 版 面 。 个 人 网 站 

可 以 整理 个 人 的 作品 、 照 片 、 展 示 等 资料 。 

企业 网 站 需要 整理 企业 的 文件 、 广 告 、 产 品 、 

活动 等 相关 资料 。 整 理 好 资料 后 需要 对 资料 
进行 筛选 和 编辑 。 

可 以 使 用 以 下 方法 来 收集 网 站 资料 与 素材 。 

。 图 片 : 可 以 使 用 相机 拍摄 相关 图 片 ， 

对 已 有 的 照片 可 以 使 用 扫描 仪 输入 到 

电脑 。 一 些 常见 图 片 可 以 在 网 站 上 搜 
索 或 下 载 。 

。 文档 : 收集 和 整理 现 有 的 文件 、 广 告 、 

电子 表格 等 内 容 。 对 纸 制 文件 需要 输 


入 到 电脑 形成 电子 文档 。 文 字 类 的 资 
料 需要 进行 整理 和 分 析 。 

。 媒体 内 容 ; 收集 和 整理 现 有 的 录音 、 
视频 等 资料 。 


1.3.5 ”设计 网 页 图 像 

在 确定 好 网 站 的 风格 和 搜集 完 资料 后 就 
需要 设计 网 页 图 像 了 ， 网 页 图 像 设 计 包 括 
LOGO、 标 准 色 彩 、 标 准 字 、 导 航 条 和 首页 布 
局 等 。 可 以 使 用 Photoshop 或 Fireworks 软件 
来 具体 设计 网 站 的 图 像 。 有 经 验 的 网 页 设计 
者 ， 通 常会 在 使 用 网 页 制作 工具 制作 网 页 之 
前 ， 设 计 好 网 页 的 整体 布局 ， 这 样 在 具体 设 
计 过 程 将 会 胸有成竹 ， 大 大 节省 工作 时 间 。 


图 1-11 网 页 图 像 


1.3.6 切 图 并 制作 成 页 面 

完成 网 页 效果 图 的 设计 后 ， 需 要 使 用 
Fireworks 或 Photoshop 对 效果 图 进行 切割 
和 优化 。 完 成 切片 后 的 效果 图 ， 需 要 使 用 
Dreamweaver 进行 网 站 页 面 的 设计 ， 在 这 一 过 
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程 中 实现 网 站 内 容 的 输入 和 排版 。 不 同 的 页 
面 使 用 超 链接 联系 起 来 ， 用 户 单 击 这 个 超 链 
接 时 即 可 跳 转 到 这 个 页 面 。 

网 页 制作 是 一 个 复杂 而 细致 的 过 程 ， 一 
定 要 按照 先 大 后 小 、 先 简单 后 复杂 的 顺序 制 
作 。 所 谓 先 大 后 小 ， 就 是 说 在 制作 网 页 时 
先 把 大 的 结构 设计 好 ， 然 后 再 逐步 完善 小 的 
结构 设计 。 所 谓 先 简单 后 复杂 ， 就 是 先 设计 
出 简单 的 内 容 ， 然 后 再 设计 复杂 的 内 容 ， 以 
便 出 现 问 题 时 好 修改 。 在 制作 网 页 时 要 灵活 
运用 模板 和 库 ， 这 样 可 以 大 大 提高 制作 效率 。 
如 果 很 多 网 页 都 使 用 相同 的 版 面 设 计 ， 就 应 
为 这 个 版 面 设 计 一 个 模板 ， 然 后 就 可 以 以 此 
模板 为 基础 创建 网 页 。 以 后 如 果 想 要 改变 所 
有 网 页 的 版 面 设计 ， 只 需 简单 的 改变 模板 即 
可 。 如 图 1-12 所 示 是 制作 的 网 页 。 


图 1-12 制作 的 网 页 


1.3.7 ”开发 动态 网 站 模块 
页 面 设计 制作 完成 后 ， 如 果 还 需要 动态 


功能 的 话 ， 就 需要 开发 动态 功能 模块 ， 网 站 
中 常用 的 功能 模块 有 搜索 功能 、 留 言 板 、 新 
闻 信 息 发 布 、 在 线 购物 、 技 术 统计 、 论 坛 及 
聊天 室 等 。 

1. 搜索 功能 

搜索 功能 是 使 浏览 者 在 短 时 间 内 ， 快 速 地 
从 大 量 的 资料 中 找到 符合 要 求 的 资料 。 这 对 于 


资料 非常 丰富 的 网 站 来 说 非常 有 用 。 要 建立 一 
个 搜索 功能 ， 就 要 有 相应 的 程序 以 及 完善 的 数 ， 
据 库 支持 ， 可 以 快速 的 从 数据 库 中 搜索 到 所 需 


要 的 职位 。 如 图 1-13 所 示 为 搜索 功能 。 
厅 时 入 厅 二 阿 和 
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图 1-13 搜索 功能 


2. 留言 板 

留言 板 、 论 坛 及 聊天 室 是 为 浏览 者 提供 
信息 交流 的 地 方 。 浏 览 者 可 以 围绕 个 别 的 产 
品 、 服 务 或 其 他 话题 进行 讨论 。 顾 客 也 可 以 
提出 问题 、 提 出 咨询 ， 或 者 得 到 售后 服务 。 
但 是 聊天 室 和 论坛 是 比较 占用 资源 的 ， 一 般 
不 是 大 中 型 的 网 站 没有 必要 建设 论坛 和 聊天 
室 ， 如 果 访 问 量 不 是 很 大 的 话 ， 做 好 了 也 没 
有 人 来 访问 ， 如 图 1-14 所 示 为 留言 板 页 面 。 


图 1-14 留言 板 页 面 


3. 新 闻 发 布 管理 系统 
新 闻 发 布 管理 系统 可 以 提供 方便 直观 的 页 
面 文字 信息 的 更 新 维护 界面 ， 提 高 工作 效率 、 


降低 技术 要 求 ， 非 常 适合 用 于 经 常 更 新 的 栏目 


或 页 面 ， 如 图 1-15 所 示 是 新 闻 发 布 管理 系统 。 
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图 1-15 新 闻 发 布 管理 系统 


4. 购物 网 站 

实现 电子 交易 的 基础 ， 用 户 将 感 兴趣 的 产 
品 放 入 自己 的 购物 车 ， 以 备 最 后 统一 结账 。 当 
然 用 户 也 可 以 修改 购物 的 数量 ， 甚 至 将 产品 从 
购物 车 中 取出 。 用 户 选择 结算 后 系统 自动 生成 
本 系统 的 订单 。 如 图 1-16 所 示 为 购物 系统 。 


和 地 订 Ta 美 目 3 折 oLR 
蛋 并 i Cm Cy 


图 1-16 购物 网 站 


1.3.8 发 布 与 上 传 

网 站 的 域名 和 空间 申请 完毕 后 ， 就 可 以 
上 传 网 站 了 ， 可 以 采用 Dreamweaver 自 带 的 
站 点 管理 上 传 文件 。 
呵 执 行 “ 站 点 ”|“ 管 理 站 点 ”命令 ， 弹 出 如 
图 1-17 所 示 的 “管理 站 点 ”对 话 框 。 


J 
EL 


图 1-17 
萝 在 对 话 框 中 单 击 “ 新 建站 点 ”按钮 ， 弹 出 
“站 点 设置 对 象 ” 对 话 框 , 在 对 话 框 中 选择 “ 服 
务 器 ”选项 卡 ， 如 图 1-18 所 示 。 


“管理 站 点 ” 对 话 框 


和 候 愉 在 此 位置 渤 反 罗 Wut 上 有 而 面 服务 器 .此 对 活 准 的 流 轨 向 
intemet 服 务 提供 而 05P) 玻 web 管理 后 。 


Wi 


Ee 


图 1-18 


吗 单 击 (+) 按钮 ， 弹 出 如 图 1-19 所 示 的 
对 话 框 。 在 “连接 方法 ”下 拉 列 表 中 选择 
FTP， 用 来 设置 沁 程 站 训 轰 务 吉 的 信 息 。 
服务 器 名 称 : 指定 新 服务 器 的 名 称 。 
。 ”连接 方法 :从 “连接 方法 ”弹出 菜单 
中 ， 选 择 “FTP”。 
。 FTP 地址: 输入 远程 站 点 的 FTP 主 
机 的 下 地址 。 
。 用 户 名 : 输入 用 于 连接 到 FTP 服务 
器 的 登录 名 。 


“服务 器 ”选项 


。 密码 : 输入 用 于 连接 到 FTP 服务 器 
的 密码 。 

。 测试 : 单 击 “ 测 试 ”， 
用 户 名 和 密码 。 

。 根 目录 : 在 “ 根 目录 ”文本 框 中 ， 输 
入 远程 服务 器 上 用 于 存储 公开 显示 的 
文档 目录 。 

。 Web URL: 在 “Web URL” 文 本 框 中 ， 
输入 Web 站 点 的 URL。 


测试 FTP 地址、 


图 1-19 设置 “远程 信息 ” 


页 设置 完 相关 的 参数 后 ， 单 击 “ 保 在 ”按钮 
完成 远程 信息 设置 。 在 文件 面板 中 单 击 “ 展 
开 / 折 登 ” 园 按钮， 展开“ 站 点 ”管理 器 ， 
如 图 1-20 所 示 。 


田 


=] 
b= 
已 
[= 
[=] 
入 
~ 


日 - 田 - 困 -图 .图 


图 1-20 “文件 ”面板 


西 在 站 点 管理 器 中 单 击 “ 连 接 到 远 端 主机 ”名 
按钮 ， 建 立 与 远程 服务 器 的 连接 ， 如 图 1-21 
所 示 。 
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图 1-21 与 远程 服务 器 连通 后 的 网 站 管理 窗口 


连接 到 服务 器 后 ， 加 按钮 会 自动 变 为 闭 
合 吕 | 状态 ， 并 在 一 旁 亮 起 一 个 小 绿灯 ， 列 出 
远 端 网 站 的 接收 目录 ， 右 侧 窗 口 显示 为 “本 
地 信息 ”， 在 本 地 目录 中 选择 要 上 传 的 文件 ， 
单 击 “ 上 传 文件 ”从 按钮 ， 上 传 文件 。 


1.3.9 ”后 期 更 新 与 维护 


一 个 好 的 网 站 ， 仅 仅 一 次 是 不 可 能 制作 
完美 的 ， 由 于 市 场 环境 在 不 断 地 变化 ， 网 站 
的 内 容 也 需要 随 之 调整 ， 给 人 常 新 的 感觉 ， 
网 站 才 会 更 加 吸引 访问 者 ， 而 且 给 访问 者 很 
好 的 印象 。 这 就 要 求 对 网 站 进行 长 期 的 不 间 
断 的 维护 和 更 新 。 

网 站 维护 一 般 包 含 以 下 内 容 。 

。 ”内 容 的 更 新 : 包括 产品 信息 的 更 新 ， 

企业 新 闻 动 态 更 新 和 其 他 动态 内 容 的 
更 新 。 采 用 动态 数据 库 可 以 随时 更 新 
发 布 新 内 容 ， 不 必 做 网 页 和 上 传 服务 
器 等 麻烦 工作 。 静 态 页 面 不 便于 维护 ， 
必须 手动 重复 制作 网 页 文档 ， 制 作 完 
成 后 还 需要 上 传 到 远程 服务 器 。 一 般 
对 于 数量 比较 多 的 静态 页 面 建议 采用 


本 章 小 结 


模板 制作 。 

。 ”网 站 风格 的 更 新 ， 包括 版 面 、 配 色 等 
各 种 方面 。 改 版 后 的 网 站 让 客户 感觉 
改头换面 ， 焕 然 一 新 。 一 般 改版 的 周 
期 要 长 些 。 客 户 对 网 站 也 满意 的 话 ， 
改版 可 以 延长 到 几 个 月 甚至 半年 。 一 
般 一 个 网 站 建设 完成 以 后 ， 代 表 了 公 
司 的 形象 ， 公 司 的 风格 。 随 着 时 间 的 
推移 ， 很 多 客户 对 这 种 形象 已 经 形成 
了 定 势 。 如 果 经 常 改 版 ， 会 让 客户 感 
觉 不 适应 ， 特 别 是 那 种 风格 彻底 改变 
的 “改版 ”。 当 然 如 果 对 公司 网 站 有 
更 好 的 设计 方案 ， 可 以 考虑 改版 。 毕 
竟 长 期 沿用 一 种 版 面 会 让 人 感觉 陈 
旧 、 厌 烦 。 

。 ”网 站 重要 页 面 设计 制作 :如 重大 事件 
页 面 、 突 发 事件 及 相关 周年 庆祝 等 活 
动 页 面 设计 制作 。 

。 网 站 系统 维护 服务 : 如 E-mail 账号 
维护 服务 、 域 名 维护 续费 服务 、 网 站 
空间 维护 、 与 IDC 进行 联系 、DNS 
设置 、 域 名 解析 服务 等 。 


1.3.10 ”网 站 的 推广 


互联 网 的 应 用 和 繁荣 提供 了 广阔 的 电子 
商务 市 场 和 商机 ， 但 是 互联 网 上 大 大 小 小 的 
各 种 网 站 数 以 百 万 计 ， 如 何 让 更 多 的 人 都 能 
迅速 地 访问 到 您 的 网 站 是 一 个 十 分 重要 的 问 
题 。 企 业 网 站 建 好 以 后 ， 如 果 不 进行 推广 
那么 企业 的 产品 与 服务 在 网 上 就 仍然 不 为 人 
所 知 ， 起 不 到 建立 站 点 的 作用 ， 所 以 企业 在 
建立 网 站 后 即 应 着 手 利用 各 种 手段 推广 自己 
的 网 站 。 网 站 的 推广 有 很 多 种 方式 ， 在 后 面 
的 章节 中 将 详细 讲述 ， 这 里 就 不 再 叙述 了 。 


本 章 主 要 学 习 了 网 页 和 网 站 的 基本 概念 、 域 名 和 空间 的 身躯 、 网 页 制作 常用 软件 ， 最 后 介 
绍 了 网 站 建设 的 流程 等 。 通 过 本 章 的 学 习 ， 读 者 应 掌握 网 页 设计 的 一 些 基 础 知识 ， 为 后 面 设计 


制作 更 复杂 的 网 页 打下 良好 的 基础 。 
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第 稼 章 网 站 页 面 的 策划 与 布局 


设计 网 页 的 第 一 步 是 设计 版 面 布局 。 好 的 网 页 布局 会 令 访 问 者 耳目 一 新 ， 同 样 也 可 以 使 访 
问 者 比较 容易 在 站 点 上 找到 他 们 所 需要 的 信息 ， 所 以 网 页 制作 初学 者 应 该 对 网 页 布局 的 相关 知 
识 有 所 了 解 。 


技术 要 点 
争 ” 熟 悉 网 页 版 面 布局 设计 争 ” 熟 悉 文字 与 版 式 设计 
令 ”了解 网 页 布局 方法 争 ” 熟 悉 图 像 与 版 式 设计 


令 了 解 常见 的 网 页 结构 类 型 


网 站 栏目 和 页 面 设计 策划 


站 策划 是 整个 网 站 构建 的 灵魂 ， 网 站 策划 在 某 种 意义 上 就 是 一 个 导演 ， 它 引领 了 网 站 的 
方向 ， 赋 予 网 站 生命 ， 并 决定 着 它 能 否 走向 成 功 。 
2.1.1 为 什么 要 进行 策划 
站 策划 是 指 在 网 站 建设 前 对 市 场 进 行 分 析 ， 确 定 网 站 的 功能 及 要 面 对 的 用 户 ， 并 根据 需 
要 对 网 站 建设 中 的 技术 、 内 容 、 费 用 、 测 试 、 推 广 、 维 护 等 做 出 策划 。 网 站 策划 对 网 站 建设 起 
到 计划 和 指导 的 作用 。 
一 个 网 站 的 成 功 与 否 和 建站 前 的 网 站 策划 有 着 极为 重要 的 关系 。 在 建立 网 站 前 应 明确 建设 
网 站 的 目的 ;确定 网 站 的 功能 ， 确 定 网 站 规模 、 投 入 费用 ， 明 确 要 做 成 什么 样 的 网 站 ;网 站 建 
成 后 面 对 的 是 广大 网 民 ， 还 是 其 他 有 针对 性 的 客户 。 这 些 问 题 只 有 详细 规划 并 进行 必要 的 市 场 
分 析 ， 才 能 避免 在 网 站 建设 中 出 现 很 多 问题 ， 使 网 站 建设 顺利 进行 。 

为 什么 目前 大 部 分 的 网 站 会 成 为 摆设 ? 为 什么 数 以 百 万 计 的 网 站 无 声 无 息 ? 为 什么 同样 的 
网 站 模式 却 有 着 截然 不 同 的 价值 ? 其 实 原因 很 简单 ， 因 为 这 些 网 站 根本 没有 事先 进行 全 面 的 策 
划 , 很 多 网 站 还 没有 意识 到 网 站 策划 的 重要 意义 。 网 站 策划 是 网 站 建设 过 程 中 最 重要 的 一 部 分 ， 
从 网 站 如 何 架设 ， 到 确定 网 站 的 浏览 人 群 、 受 众 目 标 ， 再 到 网 站 的 栏目 设置 、 宣 传 推广 策略 、 
更 新 维护 等 都 需要 慎重 而 续 密 的 策划 。 
一 个 成 功 的 网 站 ， 不 在 于 投资 多 少 钱 ， 不 在 于 有 多 少 高 深 的 技术 ， 也 不 在 于 市 场 有 多 大 ， 
而 在 于 这 个 网 站 是 否 符合 市 场 需求 ， 是 否 符合 体验 习惯 ， 是 否 符合 运营 基础 。 专 业 的 网 站 策划 
可 以 带 来 以 下 几 个 好 处 : 

。 ”避免 日 后 返工 ， 提 高 运营 效率 。 很 多 网 站 投资 人 不 是 开行 业 人 士 ， 以 为 有 了 网 站 开 

发 人 员 、 编 辑 人 员 和 市 场 人 员 就 可 以 将 一 个 网 站 运营 成 功 。 但 是 当 网 站 建设 好 以 后 ， 

市 场 工 作 却 无 法 展开 。 为 什么 ? 因为 技术 人 员 总 是 在 不 断 地 修改 网 站 ， 而 技术 人 员 也 
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总 是 叫苦 连天 ， 因 为 老板 今天 要 求 这 ， 
样 明天 要 求 那样 。 所 以 ， 为 了 避免 以 ， 
后 不 停 地 返工 修改 网 站 ， 事 先 对 网 站 ， 
的 各 个 环节 进行 细致 的 策划 是 非常 必 ， 
要 的 。 

。 ”避免 重复 烧 钱 ， 节 约 运 营 成 本 。 当 网 
站 建设 好 后 ， 为 什么 总 是 没有 用 户 
呢 ? 然后 花 很 多 钱 去 推广 ， 到 最 后 也 
没有 留 住 用 户 。 那 是 因为 网 站 的 各 环 
节 ， 尤 其 是 用 户 的 体验 环节 定位 出 了 
问题 。 因 此 ， 如 果 想 节省 网 站 推广 的 
钱 ， 那 就 仔细 反省 一 下 网 站 自身 的 定 
位 ， 做 好 网 站 的 策划 。 

。 ”避免 投资 浪费 ， 提 高 成 功 几率 。 在 投 
资 网 站 之 前 ， 一 定 要 做 一 次 细致 的 策 
划 , 如 市 场 的 考察 、 赢 利 模式 的 研究 、 
网 站 的 定位 。 只 有 具备 了 专业 的 思考 
和 策划 ， 才 能 使 投资 人 的 钱 不 白花 ， 
避免 投资 浪费 。 

。 ”避免 教训 , 成 功 运营 。 当 建设 网 站 时 ， 
不 要 以 为 有 了 技术 、 内 容 、 市 场 人 员 
就 万 事 大 圳 了， 其实 不 是 这 样 。 策 划 
网 站 时 ， 不 但 是 要 策划 网 站 的 具体 东 
西 ， 更 多 的 时 候 是 要 策划 网 站 的 市 场 
定位 、 赢 利 模式 、 运 营 模式 、 运 营 成 
本 等 重要 的 运营 环节 。 如 果 投资 人 连 
投资 网 站 要 花 多 少 钱 、 什 么 时 候 有 回 
报 都 不 了 解 的 话 ， 那 么 投资 这 个 网 站 
最 终 也 会 失败 。 


2.1.2 ”网 站 的 栏目 策划 


相对 于 网 站 页 面 及 功能 规划 ， 网 站 栏目 
策划 的 重要 性 常 被 忽略 。 其 实 ， 网 站 栏目 策 
划 对 于 网 站 的 成 败 有 着 非常 直接 的 关系 ， 网 
站 栏目 兼 具 以 下 两 个 功能 ， 二 者 缺 一 不 可 。 

1， 提 纲 报 领 ， 点 题 明 义 

网 速 越 来 越 快 ， 网 络 的 信息 越 来 越 丰富 ， 
浏览 者 却 越 来 越 缺 乏 浏览 耐心 。 打 开 网 站 不 
超过 10 秒 钟 ， 一 旦 找 不 到 自己 所 需 的 信息 
网 站 就 会 被 浏览 者 毫 不 客气 地 关 掉 。 要 让 浏 ， 
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览 者 停 下 匆匆 的 脚步 ， 就 要 清晰 地 给 出 网 站 
内 容 的 “提纲 ”， 也 就 是 网 站 的 栏目 。 

网 站 栏目 的 规划 ， 其 实 也 是 对 网 站 内 容 
的 高 度 提炼 。 即 使 是 文字 再 优美 的 书籍 ， 如 
果 缺 乏 清晰 的 纲要 和 结构 ， 恐 怕 也 会 被 淹没 
在 书本 的 海洋 中 。 网 站 也 是 如 此 ， 不 管 网 站 
的 内 容 有 多 精彩 ， 缺 乏 准确 的 栏目 提炼 ， 就 
难以 引起 浏览 者 的 关注 。 

因此 ， 网 站 的 栏目 规划 首先 要 做 到 “ 提 
纲 帮 领 、 点 题 明 义 ”， 用 最 简练 的 语言 提炼 
出 网 站 中 每 个 部 分 的 内 容 ， 清 晰 地 告诉 浏览 
者 网 站 在 说 什么 、 有 哪些 信息 和 功能 。 图 2-1 
所 示 的 网 站 的 栏目 即 具有 提纲 都 领 的 作用 。 
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图 2-1 网 站 栏目 示例 


2. 指引 迷途 ， 清 晰 导航 

网 站 的 内 容 越 多 ， 浏 览 者 就 越 容易 迷失 。 
除了 “提纲 ”的 作用 之 外 ， 网 站 栏目 还 应 该 
为 浏览 者 提供 清晰 直观 的 指引 ， 帮 助 浏览 者 
方便 地 到 达 网 站 的 所 有 页 面 。 网 站 栏目 的 导 


， 航 作用 通常 包括 以 下 4 种 情况 。 


。 ”全 局 导航 : 全 局 导航 可 以 帮助 用 户 随 
时 跳 转 到 网 站 的 任何 一 个 栏目 。 通 常 
来 说 ， 全 局 导航 的 位 置 是 固定 的 ， 以 
减少 浏览 者 查找 的 时 间 。 


。 ”路径 导 航 : 路 径 导 航 显示 了 用 户 浏览 
页 面 的 所 属 栏目 及 路 径 ， 帮 助 用 户 访 
问 该 页 面 的 上 下 级 栏目 ， 从 而 更 完整 
地 了 解 网 站 信息 。 
。 快捷 导航 : 对 于 网 站 的 老 用 户 而 言 ， 
需要 快捷 地 到 达 所 需 栏目 ， 快 捷 导航 
为 这 些 用 户 提供 了 直观 的 栏目 链接 ， 
减少 用 户 的 点 击 次 数 和 时 间 ， 提 升 济 
览 效率 。 
。 ”相关 导航 为 了 增加 用 户 的 停留 时 间 ， 
网 站 策划 者 需要 充分 考虑 浏览 者 的 需 
求 ， 为 页 面 设置 相关 导航 ， 让 浏览 者 
可 以 方便 地 到 所 关注 的 相关 页 面 ， 从 
而 增进 对 企业 的 了 解 , 提升 合作 几率 。 
在 图 2-2 所 示 的 网 页 中 ， 可 以 看 到 多 级 导 
航 栏目 ， 顶 部 有 一 级 导航 ， 左 侧 又 有 精品 酒 
店 和 酒店 报价 的 二 级 导航 。 


图 2-2 多 级 导航 栏目 ， 方 便 用 户 浏览 


归根 结 底 ， 成 功 的 栏目 规划 还 是 基于 对 
用 户 需求 的 理解 。 对 用 户 和 需求 理解 得 越 准 
确 、 越 深入 ， 网 站 的 栏目 就 越 具有 吸引 力 
也 就 越 能 够 留 住 更 多 的 潜在 客户 。 


2.1.3 ”网 站 的 页 面 策划 

网 站 页 面 是 网 站 营销 策略 的 最 终 表 现 层 ， 
也 是 用 户 访问 网 站 的 直接 接触 层 。 同 时 ， 网 
站 页 面 的 规划 也 最 容易 让 项 目 团队 产生 分 歧 。 
对 于 网 页 设计 的 评估 ， 最 有 发 言 权 的 是 


网 站 的 用 户 ， 然 而 用 户 却 无 法 明确 地 告诉 网 ， 


第 2 章 网 站 页 面 的 策划 与 布局 


站 设计 者 ， 他 们 想 要 的 是 怎样 的 网 页 ， 停 留 
或 者 离开 网 站 是 他 们 表达 意见 的 最 直接 方法 。 
好 的 网 站 策划 者 除了 要 听取 团队 中 各 个 角色 
的 意见 之 外 ， 还 要 善于 从 用 户 的 浏览 行为 中 
捕捉 用 户 的 意见 。 

网 站 策划 者 在 做 网 页 策划 时 ， 应 遵循 以 
下 原则 。 


符合 客户 的 行业 属性 及 网 站 特点 : 在 
客户 打开 网 页 的 一 瞬间 ， 让 客户 直 
观 地 感受 到 网 站 所 要 传递 的 理念 及 特 
征 ， 如 网 页 色彩 、 图 片 、 布 局 等 。 
符合 用 户 的 浏览 习惯 : 根据 网 页 内 容 
的 重要 性 进行 排序 ， 让 用 户 用 最 少 的 
光标 移动 ， 找 到 所 需 的 信息 。 

符合 用 户 的 使 用 习惯 : 根据 网 页 用 户 
的 使 用 习惯 ， 将 用 户 最 常 使 用 的 功能 
置 于 醒目 的 位 置 ， 以 便于 用 户 的 查找 
及 使 用 。 

图 文 搭配 ， 重 点 突出 : 用 户 对 于 图 片 
的 认 知 程度 远 高 于 对 文字 的 认 知 程 
度 ， 适 当地 使 用 图 片 可 以 提高 用 户 的 
关注 度 。 此 外 ， 确 立 页 面 的 视觉 焦点 
也 很 重要 ， 过 多 的 干扰 元 素 会 让 用 户 
不 知 所 措 。 图 2-3 所 示 的 网 页 页 面 中 
使 用 了 图 片 ， 大 大 提高 了 用 户 的 关注 
程度 。 


图 2-3 使 用 图 片 的 网 页 页 面 示例 


利于 搜索 引擎 优化 : 减少 Flash 和 大 
图 片 的 使 用 ， 多 用 文字 及 描述 ， 使 搜 
索引 擎 更 容易 收录 网 站 ， 让 用 户 更 容 
易 找 到 所 需 内 容 。 
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网 站 布局 的 基本 元 素 


不 同性 质 的 网 站 ， 构 成 网 页 的 基本 元 素 是 不 同 的 。 网 页 中 除了 使 用 文本 和 图 像 外 ， 还 可 以 


使 用 丰富 多 彩 的 多 媒体 和 Flash 动画 等 。 
2.2.1 网 站 LOGO 

网 站 LOGO 也 称 为 网 站 标志 ， 网 站 标 
志 是 一 个 站 点 的 象征 ， 也 是 一 个 站 点 是 否 正 
规 的 标志 之 一 。 网 站 的 标志 应 体现 该 网 站 的 
特色 、 内 容 以 及 其 内 在 的 文化 内 涵 和 理念 。 
成 功 的 网 站 标志 有 着 独 特 的 形象 标识 ， 在 网 
站 的 推广 和 宣传 中 将 起 到 事半功倍 的 效果 。 
网 站 标志 一 般 放 在 网 站 的 左上 角 ， 访 问 者 一 
眼 就 能 看 到 它 。 网 站 标志 通常 有 3 种 尺寸 : 
88X31 像素 、120X 60 像素 和 120X9 像素 。 
如 图 2-4 所 示 网 站 LOGO。 


图 2-4 网 站 LOGO 


标志 的 设计 创意 来 自 网 站 的 名 称 和 内 容 
大 致 分 以 下 3 个 方面 : 

。 ”网 站 有 代表 性 的 人 物 、 动 物 、 人 花草， 
可 以 用 它们 作为 设计 的 蓝本 ， 加 以 卡 
通化 和 艺术 化 。 

。 ”网 站 有 专业 性 的 ， 可 以 用 本 专业 有 代 
表 的 物品 作为 标志 ， 如 中 国 银行 的 铜 
板 标 志 、 奔 驰 汽车 的 方向 盘 标 志 。 

。 ”最 常用 和 最 简单 的 方式 是 用 自己 网 站 
的 英文 名 称 作 标 志 。 采 用 不 同 的 字体 、 
字符 的 变形 、 字 符 的 组 合 可 以 很 容易 
制作 好 自己 的 标志 。 
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2.2.2 网 站 banner 


网 站 banner 是 横幅 广告 ， 是 互联 网 广 
告 中 最 基本 的 广告 形式 。banner 可 以 位 于 网 
页 顶部 、 中 部 或 底部 任意 一 处 。 一 般 横向 贯 
穿 整 个 或 者 大 半 个 页 面 的 广告 条 。 常 见 的 尺 
寸 是 480X 60 像素 ， 或 233X30 像素 ， 使 用 
GIF 格式 的 图 像 文件 ， 可 以 使 用 静态 图 形 ， 
也 可 以 使 用 动画 图 像 。 除 普通 GIF 格式 外 ， 
采用 Flash 能 赋予 banner 更 强 的 表现 力 和 交 
互 内 容 。 

网 站 banner 首先 要 美观 ， 这 个 小 的 区 域 
设计 得 非常 漂亮 ， 让 人 看 上 去 很 舒服 ， 即 使 
不 是 他 们 所 要 看 的 东西 ， 或 者 是 一 些 他 们 可 
看 不 可 看 的 东西 ， 他 们 就 会 很 有 兴趣 的 去 看 
看 ， 点 击 就 是 顺理成章 的 事情 了 。 还 要 与 整 
个 网 页 协调 ， 同 时 又 要 突出 、 醒 目 ， 用 色 要 
同 页 面 的 主 色相 搭配 ， 如 图 2-5 所 示 为 设计 的 
网 站 banner。 


图 2-5 网 站 banner 


2.2.3 “导航 栏 

导航 栏 是 网 页 的 重要 组 成 元 素 ， 它 的 任 
务 是 帮助 浏览 者 在 站 点 内 快速 查找 信息 。 好 
的 导航 系统 应 该 能 引导 浏览 者 浏览 网 页 而 不 


”迷失 方向 。 导 航 栏 的 形式 多 样 ， 可 以 是 简单 


的 文字 链接 ， 也 可 以 是 设计 精美 的 图 片 或 是 


， 丰富 多 彩 的 按钮 ， 还 可 以 是 下 拉 菜单 导航 。 


一 般 来 说 ， 网 站 中 的 导航 位 置 在 各 个 页 
面 中 出 现 的 位 置 是 比较 固定 的 ， 而 且 风 格 也 
较为 一 致 。 导 航 的 位 置 一般 有 4 种 : 在 页 面 
的 左 侧 、 右 侧 、 顶 部 和 底部 。 有 了 时候 在 同一 
个 页 面 中 运用 了 多 种 导航 。 当 然 并 不 是 导航 
在 页 面 中 出 现 的 次 数 越 多 越 好 ， 而 是 要 合理 
也 运用 ， 达 到 页 面 总 体 的 协调 一 致 。 如 图 2-6 
所 示 的 网 站 导航 栏 中 既 有 项 部 导航 也 有 左 侧 
导航 。 


图 2-6 网 站 的 左 侧 导航 栏 


2.2.4 ”主体 内 容 


主体 内 容 是 网 页 中 最 重要 的 元 素 。 主 体 
内 容 借助 超 链接 ， 可 以 利用 一 个 页 面 ， 高 度 
概括 几 个 页 面 所 表达 的 内 容 ， 而 首页 的 主体 
内 容 甚至 能 在 一 个 页 面 中 高 度 概括 整个 网 站 
的 内 容 。 

主体 内 容 一 般 均 有 图 片 和 文档 构成 ， 现 
在 的 一 些 网 站 的 主体 内 容 中 还 加 入 了 视频 、 
音频 等 多 媒体 文件 。 由 于 人 们 的 阅读 习惯 是 
由 上 至 下 、 由 左 至 右 ， 所 以 主体 内 容 的 内 容 
分 布 也 是 按照 这 个 规律 ， 依 照 重 要 到 不 重要 
的 顺序 安排 内 容 ， 所 以 在 主体 内 容 中 ， 左 上 
方 的 内 容 是 最 重要 的 。 如 图 2-7 所 示 为 网 页 的 
主体 内 容 。 


图 2-7 网 页 的 主体 内 容 


2.2.5 文本 

网 页 内 容 是 网 站 的 灵魂 ， 网 页 中 的 信息 
也 以 文本 为 主 。 无论 制作 网 页 的 目的 是 什么 ， 
文本 都 是 网 页 中 最 基本 的 、 必 不 可 少 的 元 素 。 
与 图 像 相 比 ， 文 字 虽 然 不 如 图 像 那样 易于 吸 
引 浏览 者 的 注意 ， 但 却 能 准确 地 表达 信息 的 
内 容 和 含义 。 

一 个 内 容 充 实 的 网 站 必然 会 使 用 大 量 的 文 
本 。 良 好 的 文本 格式 可 以 创建 出 别 具 特 色 的 网 
页 ， 激 发 浏览 者 的 兴趣 。 为 了 克服 文字 固有 的 
缺点 ， 人 们 赋予 了 文本 更 多 的 属性 ， 如 字体 、 
字号 、 颜 色 等 ， 通 过 不 同 格式 的 区 别 ， 突 出 显 
示 重 要 的 内 容 。 此 外 ， 还 可 以 在 网 页 中 设置 各 
种 各 样 的 文字 列表 , 来 明确 表达 一 系列 的 项 目 。 
这 些 功 能 给 网 页 中 的 文本 增加 了 新 的 生命 力 ， 
如 图 2-8 所 示 的 网 页 运用 了 大 量 文本 。 


图 2-8 运用 大 量 文本 的 网 页 示例 
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2.2.6 图像 


图 像 在 网 页 中 具有 提供 信息 、 展 示 形 象 、 
装饰 网 页 、 表 达 个 人 情趣 和 风格 的 作用 。 图 
像 是 文本 的 说 明和 解释 ， 在 网 页 的 适当 位 置 
放置 一 些 图 像 ， 不 仅 可 以 使 文本 清晰 易 读 ， 
而 且 使 得 网 页 更 加 有 吸引 力 。 现 在 几乎 所 有 
的 网 站 都 使 用 图 像 来 增加 网 页 的 吸引 力 ， 有 
了 图 像 ， 网 站 才能 吸引 更 多 的 浏览 者 。 可 以 
在 网 页 中 使 用 GIF、JPEG 和 PNG 等 多 种 图 
像 格式 ， 其 中 使 用 最 广泛 的 是 GIF 和 JPEG 两 
种 格式 。 如 图 2-9 所 示 ， 在 网 页 中 插入 图 片 生 
动 形象 的 展示 了 酒店 形象 。 


图 2-9 在 网 页 中 使 用 图 片 


2.2.7 ”Flash 动画 


Flash 动画 具有 简单 易学 、 灵 活 多 变 的 特 
点 ， 所 以 受到 很 多 网 页 制作 人 员 的 喜爱 ， 它 
可 以 生成 亮丽 夺目 的 图 形 界面 ， 而 文件 的 体 
积 一 般 只 有 5KB ~ 50KB。 随 着 ActionScript 
动态 脚本 编程 语言 的 逐渐 发 展 ，Flash 已 经 不 
再 仅 局 限于 制作 简单 的 交互 动画 程序 ， 通 过 
复杂 的 动态 脚本 编程 可 以 制作 出 各 种 各 样 有 
趣 、 精 彩 的 Flash 动画 。 由 于 Flash 动画 具有 
很 强 的 视觉 冲击 力 和 听觉 冲击 力 ， 因 此 一 些 
公司 网 站 往往 会 采用 Flash 制作 相关 的 页 面 ， 
借助 Flash 的 精彩 效果 吸引 客户 的 注意 力 ， 从 
而 达到 比 以 往 静 态 页 面 更 好 的 宣传 效果 ， 如 
图 2-10 所 示 为 Flash 动画 制作 的 页 面 。 
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图 2-10 Flash 动画 制作 的 页 面 


2.2.8 页 脚 


网 页 的 最 底 端 部 分 被 称 为 页 脚 ， 页 脚 部 
分 通常 被 用 来 介绍 网 站 所 有 者 的 具体 信息 和 
联络 方式 ， 如 名 称 、 地 址 、 联 系 方式 、 版 权 
信息 等 。 其 中 一 些 内 容 被 做 成 标题 式 的 超 链 
接 ， 引 导 浏 览 者 进一步 了 解 详细 的 内 容 。 如 
图 2-11 所 示 的 页 脚 。 


@uss | 全 -rr x 
Fp we | 
4 
【 E00 5 国 = 
图 2-11 页 脚 
2.2.9 广告 区 


广告 区 是 网 站 实现 赢利 或 自我 展示 的 区 
域 。 一 般 位 于 网 页 的 顶部 、 右 侧 。 广 告 区 内 
容 以 文字 、 图 像 、Flash 动画 为 主 。 通 过 吸引 
浏览 者 点 击 链接 的 方式 达成 广告 效果 。 广 告 
区 设置 要 达到 明显 、 合 理 、 引 人 注目 ， 这 对 
整个 网 站 的 布局 很 重要 。 如 图 2-12 所 示 为 网 
页 广告 区 。 


图 2-12 网 页 广告 区 


网 页 版 面 布局 设计 


网 站 中 有 很 多 不 同 的 网 页 ， 如 主页 、 栏 目 首页 、 内 容 网 页 等 ， 不 同 的 网 页 需要 不 同 的 版 面 
不 同 的 是 ， 网 站 的 所 有 网 页 组 成 的 是 一 个 层次 型 结构 ， 每 一 层 网 页 里 都 需 


布局 。 与 报纸 、 杂 志 


Se 
> 
第 2 章 网 站 页 面 的 策划 与 布局 


要 建立 访问 下 一 层 网 页 的 超 链接 索引 ， 所 以 网 页 所 处 的 层次 越 高 ， 网 页 中 的 内 容 就 越 丰富 ， 网 


页 的 布局 就 越 复杂 。 


2.3.1 ”网 页 版 面 布局 原则 

网 页 在 设计 上 有 许多 共同 之 处 ， 如 报纸 
等 ， 也 要 遵循 一 些 设计 的 基本 原则 。 熟 悉 一 
些 设计 原则 ， 再 对 网 页 的 特殊 性 作 一 些 考虑 ， 
便 不 难 设 计 出 美观 大 方 的 页 面 来 。 网 页 页 面 
设计 有 以 下 几 条 基本 原则 ， 熟 悉 这 些 原 则 将 
对 页 面 的 设计 有 所 帮助 。 

1. 主 次 分 明 ， 中 心 突 出 

在 一 个 页 面 上 ， 必 须 考 虑 视觉 的 中 心 
这 个 中 心 一 般 在 屏幕 的 中 央 ， 或 者 在 中 间 偏 
上 的 部 位 。 因 此 ， 一 些 重 要 的 文章 和 图 像 一 
般 可 以 安排 在 这 个 部 位 ， 在 视觉 中 心 以 外 的 
地 方 就 可 以 安排 那些 稍微 次 要 的 内 容 ， 这 样 
在 页 面 上 就 突出 了 重点 ， 做 到 了 主 次 有 别 。 
如 图 2-13 所 示 网 页 上 的 内 容 主 次 分 明 ， 重 点 
突出 了 酒店 的 会 议 设施 、 餐 饮 设 施 、 康 体 娱 
乐 设施 和 客房 设施 的 图 片 。 


图 2-13 网 页 上 的 内 容 主 次 分 明 


2. 简洁 一 致 性 
保持 简洁 的 常用 做 法 是 使 用 醒目 的 标题 ， 
这 个 标题 常常 采用 图 形 表示 ， 但 图 形 同 样 要 求 


简洁 。 另 一 种 保持 简洁 的 做 法 是 限制 所 用 的 字 
体 和 颜色 的 数目 。 一 般 每 页 使 用 的 字体 不 超过 
3 种 ， 一 个 页 面 中 使 用 的 颜色 少 于 256 种 。 

要 保持 一 致 性 ， 可 以 从 页 面 的 排版 下 手 ， 
各 个 页 面 使 用 相同 的 页 边 距 ， 文 本 、 图 形 之 
间 保 持 相同 的 间距 。 主 要 图 形 、 标 题 或 符号 
旁边 留 下 相同 的 空白 。 

3. 大 小 搭配 ， 相 互 呼应 

较 长 的 文章 或 标题 ， 不 要 编辑 在 一 起 
要 有 一 定 的 距离 ， 同样， 较 短 的 文章 ， 也 不 
能 编排 在 一 起 。 对 待 图 像 的 安排 也 是 这 样 ， 
要 互相 错开 ， 使 大 小 图 像 之 间 有 一 定 的 间隔 ， 
这 样 可 以 使 页 面 错落 有 致 ， 避 免 重 心 的 偏离 。 
如 图 2-14 所 示 为 图 文 搭配 大 小 呼应 的 网 页 
示例 。 


EIEOGEEE 
至 册 而 和 各 区 
十 珊 丰 本 瑟 
二 这 站 卫生 于 
“ 想 字 调 有 区 
ER 
入 三 


区 


图 2-14 图 文 搭配 排版 示例 


4. 图 文 并 茂 ， 相 得 益 彰 

文字 和 图 像 具 有 一 种 相互 补充 的 视觉 关 
系 , 页 面 上 文字 太 多 , 就 显得 沉 闽 , 缺乏 生气 。 
页 面 上 图 像 太 多 ， 缺 少 文字 ， 必 然 会 减少 页 
面 的 信息 容量 。 因 此 ， 最 理想 的 效果 是 文字 
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9 O00( 人 


oo @- 
» CO ec 网 页 设计 与 网 站 建设 完全 实战 手册 


与 图 像 的 密切 配合 , 互 为 衬托 , 既 能 活跃 页 面 ， 
又 使 主页 有 丰富 的 内 容 。 

5. 网 页 颜色 选用 

考虑 到 大 多 数 人 使 用 256 色 显示 模式 
因此 一 个 页 面 显示 的 颜色 不 宜 过 多 ， 应 当 控 
制 在 256 色 以 内 。 主 题 颜色 通常 只 需要 2 ~ 3 
种 ， 并 采用 一 种 标准 色 。 如 图 2-15 所 示 为 主 
题 颜色 采用 两 种 的 网 页 示例 。 


图 2-15 网 页 主题 颜色 采用 两 种 


6. 网 页 布局 时 的 一 些 元 素 

网 页 布局 时 的 一 些 元 素 包括 格式 美观 的 
正文 、 和 谐 的 色彩 搭配 、 较 好 的 对 比 度 、 可 
读 性 较 强 的 文字 、 生 动 的 背景 图 案 、 页 面 元 
素 大 小 适中 、 布 局 匀称 、 不 同 元 素 之 间 有 足 
够 空白 、 各 元 素 之 间 保 持平 衡 、 文 字 准确 无 误 、 
无 错别字 、 无 拼写 错误 。 


2.3.2 ”点 、 线 、 面 的 构成 


点 、 线 、 面 是 构成 视觉 空间 的 基本 元 素 ， 
是 表现 视觉 形象 的 基本 设计 语言 。 网 页 设计 
实际 上 就 是 如 何 经 营 好 三 者 的 关系 ， 因 为 不 
管 是 任何 视觉 形象 或 者 版 式 构成 ， 归 结 到 底 ， 
都 可 以 归纳 为 点 、 线 和 面 。 一 个 按钮 、 一 个 
文字 是 一 个 点 。 几 个 按钮 或 者 几 个 文字 的 排 
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列 形成 线 。 而 线 的 移动 或 者 数 行文 字 或 者 一 
块 空白 可 以 理解 为 面 。 点 、 线 、 面 相互 依存 ， 
相互 作用 ; 可 以 组 合成 各 种 各 样 的 视觉 形象 ， 
千变万化 的 视觉 空间 。 

1. 点 的 视觉 构成 
在 网 页 中 ， 一 个 单独 而 细小 的 形象 可 以 
称 之 为 点 。 点 是 相 比较 而 言 的 ， 比 如 一 个 汉 
字 是 由 很 多 笔划 组 成 的 , 但 是 在 整个 页 面 中 ， 
可 以 称 为 一 个 点 。 点 也 可 以 是 网 页 中 相对 微 
小 单纯 的 视觉 形象 ， 如 按钮 、LOGO 等 。 如 
图 2-16 所 示 是 网 页 中 的 按钮 组 成 的 点 。 


图 2-16 网 页 中 的 按钮 组 成 的 点 


需要 说 明 的 是 ， 并 不 是 只 有 圆 的 才 叫 点 ， 
方形 、 三 角形 、 自由 形 都 可 以 作为 视觉 上 的 点 ， 
点 是 相对 线 和 面 而 存在 的 视觉 元 素 。 

点 是 构成 网 页 的 最 基本 单位 ， 在 网 页 设 
计 中 ， 经 常 需要 我 们 主观 地 加 些 点 ， 如 在 新 
闻 的 标题 后 加 个 NEW， 在 每 一 小 行文 字 的 前 
面 加 个 方 或 者 圆 的 点 。 

点 在 页 面 中 起 到 活泼 生动 的 作用 ， 使 用 
得 当 ， 甚 至 可 以 是 画龙点睛 的 效果 。 

一 个 网 页 往往 需要 有 数量 不 等 、 形 状 各 
异 的 点 来 构成 。 点 的 形状 、 方向 、 大 小 、 位置、 
聚集 、 发 散 ， 能 够 给 人 带 来 不 同 的 心理 感受 。 

2， 线 的 视觉 构成 

点 的 延伸 形成 线 ， 线 在 页 面 中 的 作用 在 
于 表示 方向 、 位 置 、 长 短 、 宽 度 、 形 状 、 质 


量 和 情绪 。 如 图 2-17 所 示 为 网 页 中 的 线条 。 


“be 夏季 最 抢手 0 
秘密 武器 


> 里 仙 兰 修长 x 座 宪 随心 控 起 毛 波 


图 2-17 网 页 中 的 线条 


线 是 分 割 页 面 的 主要 元 素 之 一 ， 是 决定 
页 面 现象 的 基本 要 素 。 

线 分 为 直线 和 曲线 两 种 ， 这 是 线 的 总 体 
形状 。 

线 的 总 体形 状 有 垂直 、 水 平 、 倾 斜 、 几 


何 曲线 自由 线 这 几 种 可 能 。 

线 是 具有 情感 的 。 如 水 平 线 给 人 开阔 、 
安宁 、 平 静 的 感觉 ， 斜 线 具 有 动力 、 不 安 、 
速度 和 现代 意识 ， 垂 直线 具有 庄严 、 挺 拔 、 
力量 、 向 上 的 感觉 ， 曲 线 具 有 和 柔软 流畅 的 女 
性 特征 ， 自 由 曲线 是 最 好 的 情感 抒发 手段 。 

将 不 同 的 线 运 用 到 页 面 设计 中 ， 会 获得 
不 同 的 效果 。 知 道 什么 时 候 应 该 运用 什么 样 
的 线条 ， 可 以 充分 的 表达 所 要 体现 的 东西 。 

3. 面 的 视觉 构成 

面 是 无 数 点 和 线 的 组 合 ， 面 具有 一 定 的 


网 页 布局 方法 


面积 和 质量 ， 占 据 空 间 的 位 置 更 多 ， 因 而 相 
比 点 和 线 来 说 , 面 的 视觉 冲击 力 更 大 更 强烈 。 
如 图 2-18 所 示 为 网 页 中 不 同 背景 颜色 将 页 面 
分 成 不 同 的 板块 。 

只 有 合理 的 安排 好 面 的 关系 ， 才 能 设计 
出 充满 美感 ， 艺 术 加 实用 的 网 页 作品 。 在 网 
页 的 视觉 构成 中 ， 点 、 线 、 面 既是 最 基本 的 
造型 元 素 ， 又 是 最 重要 的 表现 手段 。 在 确定 
网 页 主体 形象 的 位 置 、 动 态 时 ， 点 、 线 、 面 
将 是 需要 最 先 考虑 的 因素 。 只 有 合理 的 安排 
好 点 、 线 、 面 的 互相 关系 ， 才 能 设计 出 具有 
最 佳 视觉 效果 的 页 面 。 


图 2-18 网 页 中 的 面 


为 了 使 网 页 能 达到 最 佳 的 视觉 表现 效果 ， 应 讲究 网 页 整体 布局 的 合理 性 ， 使 浏览 者 有 一 个 
流畅 的 视觉 体验 。 在 制作 网 页 前 ， 可 以 先 布 局 出 网 页 的 草图 。 网 页 布局 的 方法 有 两 种 ， 一 种 为 


纸 上 布 局 ， 另 一 种 为 软件 布局 ， 下 面 分 别 介绍 。 


2.4.1 纸 上 布 局 法 


熟悉 网 页 制作 的 人 在 拿 到 网 页 的 相关 内 容 后 ， 也 许 很 快 就 可 以 在 脑子 里 形成 大 概 的 布局 ， 
并 且 可 以 直接 用 网 页 制作 工具 开始 制作 。 但 是 对 不 熟悉 网 页 布局 的 人 来 说 ， 这 么 做 有 相当 大 的 
困难 ， 所 以 这 时 就 需要 借助 于 其 他 的 方法 来 进行 网 页 布局 。 

设计 版 面 布局 前 先 画 出 版 面 的 布局 草图 ， 接 着 对 版 面 布局 进行 细 划 和 调整 ， 反 复 细 划 和 调 


整 后 确定 最 终 的 布局 方案 。 


新 建 的 页 面 就 像 一 张 白 纸 ， 没 有 任何 表格 、 框 架 和 约定 俗 成 的 东西 ， 尽 可 能 地 发 挥 想象 力 ， 
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将 所 想到 的 内 容 画 上 去 。 这 属于 创造 阶段 ， 
不 必 讲 究 细 腻 工 整 ， 不 必 考 虑 细节 功能 ， 只 
用 粗 陋 的 线条 勾画 出 创意 的 轮廓 即 可 。 尽 可 
能 地 多 画 几 张 草图 ， 最 后 选 定 一 个 满意 的 来 
创作 ， 如 图 2-19 所 示 。 


图 2-19 纸 上 布 局 草图 


2.4.2 ”软件 布局 法 
如 果 不 喜 欢 用 纸 来 画 出 布局 示意 图 ， 还 可 
以 用 专业 制图 软件 来 进行 布局 (如 Fireworks 


常见 的 网 页 结构 类 型 


和 Photoshop 等 ) ， 用 它们 可 以 像 设 计 一 幅 图 
片 、 一 幅 招贴 画 、 一 幅 广告 一 样 去 设计 一 个 
网 页 的 界面 ， 然 后 再 考虑 如 何 用 网 页 制作 工 


具 去 实现 这 个 网 页 。 利 用 软件 可 
用 颜色 ， 使 用 图 形 ， 并 且 可 以 利 


以 方便 的 使 
用 层 的 功能 


设计 出 用 纸张 无 法 实现 的 布局 意念 。 如 图 2-20 
所 示 是 使 用 软件 布局 的 网 页 草图 。 


图 2-20 使 用 软件 布局 的 网 页 草图 


常见 的 网 页 布局 形式 大 臻 有 “ 国 ” 字 型 、“ 厂 ” 字 型 、“ 框 架 ” 型 “封面 ”型 和 Flash 型 布局 。 


2.5.1 “ 厂 ” 字 型 布局 

厂 字 型 结构 布局 是 指 页 面 顶部 
为 标志 + 广告 条 ， 下 方 左面 为 主 菜 
单 ， 右 面 显示 正文 信息 ， 如 图 2-21 
所 示 。 这 是 网 页 设计 中 使 用 广泛 的 
一 种 布局 方式 ， 一 般 应 用 于 企业 网 
站 中 的 二 级 页 面 。 这 种 布局 的 优点 
是 页 面 结构 清晰 、 主 次 分 明 ， 是 初 
学 者 最 容易 上 手 的 布局 方法 。 在 这 
种 类 型 中 ， 一 种 很 常见 的 类 型 是 
最 上 面 为 标题 及 广告 ， 左 侧 为 导 
航 链接 。 
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图 2-21 “ 厂 ” 字 型 布局 
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2.5.2 “ 国 ” 字 型 布局 

“ 国 ” 字 型 布局 如 图 2-22 所 示 。 最 上 面 是 网 站 的 标志 、 广 告 以 及 导航 栏 ， 接 下 来 是 网 站 
的 主要 内 容 ， 左 右 分 别 列 出 一 些 栏目 ， 中 间 是 主要 部 分 ， 最 下 部 是 网 站 的 一 些 基本 信息 ， 这 种 
结构 是 国内 一 些 大 中 型 网 站 常见 的 布局 方式 。 优 点 是 充分 利用 版 面 、 信 息 量 大 ， 缺 点 是 页 面 显 
得 拥挤 ， 不 够 灵活 。 


2.5.3 “框架 ”型 布局 


框架 型 布局 一 般 分 成 上 下 或 左右 布局 ， 一 栏 是 导航 栏目 ， 一 栏 是 正文 信息 。 复 杂 的 框架 结 
构 可 以 将 页 面 分 成 许多 部 分 ， 常 见 的 是 三 栏 布局 ， 如 图 2-23 所 示 。 上 边 一 栏 放置 图 像 广告 ， 
左边 一 栏 显示 导航 栏 ， 右 边 显示 正文 信息 。 


ES 


和 
学生 


er 
二 本 有 你 目 人 


图 2-22 “ 国 ” 字 型 布局 图 2-23 框架 型 布局 


2.5.4 “封面 ”型 布局 

封面 型 布局 一 般 应 用 在 网 站 的 主页 或 广告 宣传 页 上 ， 为 精美 的 图 像 加 上 简单 的 文字 链接 ， 
指向 网 页 中 的 主要 栏目 ， 或 通过 “进入 ”链接 到 下 一 个 页 面 ， 如 图 2-24 所 示 是 “封面 ”型 布 
局 的 网 页 。 
2.5.5 ”Flash 型 布局 


这 种 布局 跟 封 面 型 的 布局 结构 类 似 ， 不 同 的 是 页 面 采用 了 Flash 技术 ， 动 感 十 足 ， 可 以 大 
大 增强 页 面 的 视觉 效果 ， 如 图 2-25 所 示 的 是 Flash 型 网 页 布局 。 
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图 2-24 封面 型 布局 的 网 页 


文字 与 版 式 设计 


图 2-25 Flash 型 网 页 布局 


文本 是 人 类 重要 的 信息 载体 和 交流 工具 ， 网 页 中 的 信息 也 是 以 文本 为 主 的 。 虽 然 文字 不 如 
图 像 直 观 形 象 ， 但 是 却 能 准确 地 表达 信息 的 内 容 和 含义 。 在 确定 网 页 的 版 面 布局 后 ， 还 需要 确 
定 文本 的 样式 ， 如 字体 、 字 号 和 颜色 等 ， 还 可 以 将 文字 图 形 化 。 


2.6.1 ”文字 的 字体 、 字 号 、 行 距 

网 页 中 中 文 默认 的 标准 字体 是 “宋体 ”， 
英文 是 “The New Roman”。 如 果 在 网 页 中 没 
有 设置 任何 字体 ， 在 浏览 器 中 将 以 这 两 种 字 
体 显示 。 

字号 大 小 可 以 使 用 磅 (point) 或 像素 
(pixel) 来 确定 。 一 般 网 页 常用 的 字号 大 小 
为 12 磅 左右 。 较 大 的 字体 可 用 于 标题 或 其 他 
需要 强调 的 地 方 ， 小 一 些 的 字体 可 以 用 于 页 
脚 和 辅助 信息 。 需 要 注意 的 是 ， 小 字号 容易 
产生 整体 感 和 精致 感 ， 但 可 读 性 较 差 。 

无 论 选择 什么 字体 ， 都 要 依据 网 页 的 总 
体 设想 和 浏览 者 的 需要 。 在 同一 页 面 中 ， 字 
体 种 类 少 , 版 面 雅致 有 稳重 感 ; 字体 种 类 多 ， 
则 版 面 活跃 ， 丰 富 多 彩 。 关 键 是 如 何 根据 页 
面 内 容 来 掌握 这 个 比例 关系 。 

行距 的 变化 也 会 对 文本 的 可 读 性 产生 很 
大 影响 ， 一 般 情 况 下 ， 接 近 字 体 尺 二 的 行 
距 设 置 比较 适合 正文 。 行 距 的 常规 比例 为 
10:12， 即 用 字 为 10 点 ， 则 行距 为 12 点 ， 如 
图 2-26 所 示 ， 将 行距 适当 放大 后 字体 感觉 比 
较 合适 。 
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图 2-26 适当 的 行距 


行距 可 以 用 行 高 (line-height) 属性 来 
设置 ， 建 议 以 磅 或 默认 行 高 的 百分数 为 单 
位 。 如 “line-height: 20pt”、 “line-height: 
150%”。 

2.6.2 ”文字 的 颜色 

在 网 页 设计 中 可 以 为 文字 、 文 字 超 链接 、 
已 访问 超 链接 和 当前 活动 超 链 接 选用 各 种 颜 
色 。 如 正常 字体 颜色 为 黑色 ， 默 认 的 超 链接 
颜色 为 蓝 色 , 用 鼠标 单 击 之 后 又 变 为 紫红 色 。 


使 用 不 同 颜色 的 文字 可 以 使 想 要 强调 的 部 分 
更 加 引 人 注 目 ， 但 应 该 注意 的 是 ， 对 于 文字 
的 颜色 ， 只 可 少量 运用 ， 如 果 什么 都 想 强 调 ， 
其 实 是 什么 都 没有 强调 。 况 且 ， 在 一 个 页 面 
上 运用 过 多 的 颜色 ， 会 影响 浏览 者 阅读 页 面 
内 容 ， 除 非 有 特殊 的 设计 目的 。 

颜色 的 运用 除了 能 够 起 到 强调 整体 文字 
中 特殊 部 分 的 作用 之 外 ， 对 于 整个 文案 的 情 
感 表达 也 会 产生 影响 。 如 图 2-27 所 示 的 是 多 
彩 的 网 页 文字 。 


> 
图 2-27 多 彩 的 网 页 文字 
另外 ， 需 要 注意 的 是 文字 颜色 的 对 比 度 ， 
包括 明度 上 的 对 比 、 纯 度 上 的 对 比 及 冷暖 的 
对 比 。 这 些 不 仅 对 文字 的 可 读 性 有 影响 ， 更 


图 像 设计 排版 


图 像 是 网 页 构成 中 最 重要 的 元 素 之 一 ， 美 观 的 图 像 会 给 网 页 增色 不 少 。 


第 2 章 网 站 页 面 的 策划 与 布局 
重要 的 是 ， 可 以 通过 对 颜色 的 运用 实现 想 要 
的 设计 效果 、 设 计 情感 和 设计 思想 。 


2.6.3 ”文字 的 图 形 化 


所 谓 文 字 的 图 形 化 ， 即 把 文字 作为 图 形 
元 素来 表现 ， 同 时 又 强化 了 原 有 的 功能 。 作 
为 网 页 设计 者 ， 既 可 以 按照 常规 的 方式 来 设 
置 字体 ， 也 可 以 对 字体 进行 艺术 化 的 设计 。 
无 论 怎 样 ， 一 切 都 应 该 围绕 如 何 更 出 色 地 实 
现 自己 的 设计 目标 这 个 主题 。 

将 文字 图 形 化 ， 以 更 富 创意 的 形式 表达 
出 深层 的 设计 思想 ， 能 够 克服 网 页 的 单调 与 
平淡 ， 从 而 打动 人 心 ， 如 图 2-28 所 示 为 图 形 
化 的 文字 。 


图 2-28 图 形 化 的 文字 


另 一 方面 ， 图 像 本 


身 也 是 传达 信息 的 重要 手段 之 一 ， 与 文字 相 比 ， 它 可 以 更 直观 地 、 更 容易 地 把 那些 文字 无 法 表 
达 的 信息 表达 出 来 ， 易 于 浏览 者 理解 和 接受 ， 所 以 图 像 在 网 页 中 的 作用 非常 重要 。 


2.7.1 ”网 页 中 应 用 图 像 的 注意 要 点 

网 页 设计 与 一 般 的 平面 设计 不 同 ， 网 页 
图 像 不 需要 很 高 的 分 辩 率 ， 但 是 这 并 不 代表 
任何 图 像 都 可 以 添加 到 网 页 上 。 在 网 页 中 使 
用 图 像 还 需要 注意 以 下 几 点 : 

。 图像 不 仅仅 是 修饰 性 的 点 级 ， 还 可 以 
传递 相关 信息 。 所 以 在 选择 图 像 前 ， 
应 选择 与 文本 内 容 及 整个 网 站 相关 的 
图 像 。 如 图 2-29 所 示 的 图 像 就 与 网 
站 的 内 容 相关 。 


图 2-29 图 像 与 网 站 的 内 容 相关 
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除了 图 像 的 内 容 以 外 ， 还 要 考虑 图 像 ， 
的 大 小 ， 如 果 图 像 文件 太 大 ， 浏 览 者 
在 下 载 时 会 花费 很 长 的 时 间 去 等 待 ， 
这 将 会 大 大 影响 浏览 者 的 下 载 意 愿 。 
所 以 一 定 要 尽量 压缩 图 像 文 件 的 大 小 。 

图 像 的 主体 最 好 清晰 可 见 ， 图 像 的 含 
义 最 好 简单 明了 ， 如 图 2-30 所 示 。 

图 像 文字 的 颜色 和 图 像 背 景 颜 色 最 好 
有 鲜明 的 对 比 。 


图 2-30 图 像 的 主体 清晰 可 见 

在 使 用 图 像 作为 网 页 背景 时 ， 最 好 能 
使 用 淡色 系列 的 背景 图 。 背 景 图 像 像 
素 越 小 越 好 ， 这 样 将 能 大 大 降低 文件 
的 质量 , 又 可 以 制作 出 美观 的 背景 图 。 
如 图 2-31 所 示 为 淡色 的 背景 图 。 


图 2-31 淡色 的 背景 图 


。 ”对 于 网 页 中 的 重要 图 像 ， 最 好 添加 提 
示 文 本 。 这 样 做 的 好 处 是 ， 即 使 浏览 
者 关闭 了 图 像 显示 或 由 于 网 速 而 使 图 
像 没 有 下 载 完 ， 浏 览 者 也 能 看 到 图 像 
说 明 ， 从 而 决定 是 否 下 载 图 像 。 
2.7.2 ”让 图 片 更 合理 
网 页 上 的 图 片 也 是 版 式 的 重要 组 成 部 
分 ， 正 确 地 运用 图 片 ， 可 以 帮助 用 户 加 深 对 
信息 的 印象 。 与 网 站 整体 风格 协调 的 图 片 ， 
能 帮助 网 站 营造 独特 的 品牌 氛围 ， 加 深 浏 览 
者 对 网 站 的 印象 。 
网 站 中 的 图 片 大 致 有 以 下 3 种 : banner 
广告 图 片 、 产 品 展示 图 片 、 修 饰 性 图 片 ， 如 
图 2-32 所 示 的 网 页 中 使 用 了 各 种 图 片 。 


ET 


图 2-32 网 页 中 使 用 了 各 种 图 片 


-> 
Oo 
第 2 章 网 站 页 面 的 策划 与 布局 


友 指点 迷津 女 

在 设计 处 理 网 页 图 片 时 注意 以 下 事项 : 

。 图 片 出 现 的 位 置 和 尺寸 合理 ， 不 对 信息 获取 产生 干扰 ， 以 致 喧 宾 夺 主 。 
考虑 浏览 者 的 网 速 ， 图 片 文件 不 宜 过 大 。 

有 节制 地 使 用 Flash 和 动画 图 片 。 

在 产品 图 片 的 alt 标签 中 添加 产品 名 称 。 

形象 图 片 注重 原创 性 。 


本 本章 小 结 

网 站 页 面 的 布局 与 策划 对 于 网 站 要 表达 的 理念 具有 关键 的 作用 。 网 站 页 面 布局 设计 是 为 了 
服务 于 目标 用 户 ， 这 是 网 站 设计 最 优先 考虑 的 因素 。 网 站 布局 的 设计 是 网 站 竞争 力 的 一 个 重要 
方面 ， 在 同 质 化 非常 严重 的 互联 网 网 站 中 ， 有 和 良好 布局 的 网 站 更 容易 让 用 户 喜 欢 并 成 为 网 站 的 
忠实 用 户 。 


打开 一 个 网 站 ， 给 用 户 留 下 第 一 印象 的 既 不 是 网 站 丰富 的 内 容 ， 也 不 是 网 站 合理 的 版 面 布 
局 ， 而 是 网 站 的 色彩 。 在 网 页 设计 中 ， 色 彩 搭配 是 树立 网 站 形象 的 关键 ， 色 彩 处 理 得 好 ， 可 以 
使 网 页 锦上添花 ， 达 到 事半功倍 的 效果 。 色 彩 搭配 一 定 要 合理 ， 给 人 一 种 和 谐 、 愉 快 的 感觉 ， 
避免 采用 容易 造成 视觉 疲劳 的 纯度 很 高 的 单一 色彩 。 在 设计 网 页 色彩 时 ， 应 该 了 解 一 些 搭配 技 
巧 ， 以 便 更 好 地 使 用 色彩 ， 本 章 彩色 效果 请 参照 彩 插页 。 


急 ”熟悉 色彩 基础 知识 令 ”掌握 色彩 与 心理 
仿 ”熟悉 色彩 的 三 要 素 令 ”掌握 页 面色 彩 搭配 


色彩 基础 知识 


自然 界 中 有 许多 种 色彩 ， 如 香花 是 黄色 的 ， 天 是 蓝 色 的 ， 桶 子 是 橙色 的 …… 色 彩 多 种 多 样 ， 
干 变 万 化 。 
3.1.1 色彩 的 基本 概念 

为 了 能 更 好 地 应 用 色彩 来 设计 网 页 ， 先 
来 了 解 一 下 色彩 的 基本 概念 。 自 然 界 中 的 色 从 本 
彩 千变万化 ， 但 是 最 基本 的 有 3 种 ( 红 、 黄 、 
蓝 ) ， 其 他 的 色彩 都 可 以 由 这 3 种 色彩 调和 会 
而 成 ， 这 3 种 色彩 称 为 “三 原色 ”。 平时 所 


看 到 的 白色 光 , 经 过 分 析 可 以 在 色 带 上 看 到 ， 
它 包 括 红 、 栓 、 黄 、 绿 、 青 、 蓝 、 紫 等 7 种 


颜色 ， 如 图 3-1 所 示 。 图 3-1 阳光 被 分 解 后 的 7 种 主要 颜色 
。 相近 色 : 色 环 中 相 邻 的 3 种 颜色 ， Het 
一 wm- 


目 近 色 的 搭配 给 人 的 视觉 效果 很 舍 sp 
适 ， 很 自然 ， 所 以 相近 色 在 网 站 设 * > Ns 
计 中 极为 常用 。 如 图 3-2 所 示 的 深蓝 0 
色 、 浅 蓝 色 和 紫色 。 

。 互补 色 : 色 环 中 相对 的 两 种 色彩 ， 


如 图 3-3 所 示 的 亮 绿色 和 紫色 、 红 色 Ta 
和 绿色 、 蓝 色 和 橙色 等 。 对 于 互补 色 ， 图 3-2 相近 色 图 3-3 互补 色 


调整 一 下 补 色 的 亮度 ， 有 时 候 是 一 种 很 好 的 搭配 。 


。 暖色 : 如 图 3-4 所 示 的 黄色 、 橙 色 、 红 色 、 紫 色 等 都 属于 暖色 系列 。 暖 色 与 黑色 调和 
可 以 达到 很 好 的 效果 。 上 暖色 一 般 应 用 于 购物 类 网 站 、 儿 童 类 网 站 等 ， 用 以 体现 商品 的 


琳琅 满目 ， 儿 童 类 网 站 的 活 浅 、 温 声 
等 效果 。 

。 冷色: 如 图 3-5 所 示 的 绿色 、 蓝 色 、 
蓝 紫 色 等 都 属于 冷色 系列 。 冷 色 与 白 
色调 和 可 以 达到 一 种 很 好 的 效果 。 冷 
色 一 般 应 用 于 一 些 高 科技 网 站 ， 主 要 


表达 严肃 、 稳 重 等 效果 。 pa 而 汪 台 入 让 
3.1.2 ”网 页 安全 色 


网 页 安全 色 是 指 在 不 同 硬件 环境 、 不 同 操作 系统 、 不 同 浏览 器 中 都 能 够 正常 显示 的 颜色 集 
合 〈 调 色 板 ) ， 也 就 是 说 这 些 颜色 在 任何 终端 浏览 ， 用 户 显示 设备 上 的 显示 效果 都 是 相同 的 。 


所 以 ， 使 


肯 216 网 页 安全 色 进 行 网 页 配色 ， 可 以 避免 原 有 的 颜色 失真 问题 。 如 图 3-6 所 示 为 网 


页 安全 色 大 全 。 
只 要 在 网 页 中 使 用 216 网 页 安全 颜色 ， 就 可 以 控制 网 页 的 色彩 显示 效果 。 使 用 网 页 安全 颜 


色 的 同时 ， 


也 不 排除 非 网 页 安全 颜色 的 使 用 。 


图 3-6 网 页 安全 色 


网 页 设计 与 网 站 建设 完全 实战 手册 


色彩 的 三 要 素 


现实 生活 中 的 色彩 可 以 分 为 彩色 和 非 彩色 。 其 中 黑白 灰 属 于 非 彩色 系列 ， 其 他 的 色彩 都 属 


于 彩色 。 明 度 、 
3.2.1 色相 

色相 指 的 是 色彩 的 名 称 。 色 相 是 色彩 最 
基本 的 特征 ， 是 一 种 色彩 区 别 于 另 一 种 色彩 
最 主要 的 因素 。 如 紫色 、 绿 色 、 黄 色 等 都 代 
表 了 不 同 的 色相 。 同 一 色相 的 色彩 ， 调 整 一 
下 亮度 或 者 纯度 ,很 容易 搭配 , 如 深 绿 、 暗 绿 、 
草绿 。 

最 初 的 基本 色相 为 : 红 、 橙 、 黄 、 绿 、 蓝 、 
紫 。 在 各 色 中 间 加 一 两 个 中 间 色 ， 其 头 尾 色 
相 按 光谱 排序 为 ， 红 、 禁 红 、 黄 栓 、 黄 、 黄 
绿 、 绿 、 绿 蓝 、 蓝 绿 、 蓝 、 蓝 紫 、 紫 、 红 紫 一 一 
十 二 基本 色相 。 如 图 3-7 所 示 。 


图 3-7 十 二 基本 色相 


3.2.2 ”明度 

明度 也 叫 亮度 ， 指 的 是 色彩 的 明暗 程度 ， 
明度 越 大 ， 色 彩 越 亮 。 如 一 些 购物 、 儿 童 类 
网 站 ， 用 的 是 一 些 鲜亮 的 颜色 ， 让 人 感觉 绚 
丽 多 姿 ， 生 气 勃 勃 。 明 度 越 低 ， 颜 色 越 暗 
主要 用 于 一 些 游 戏 类 网 站 ， 充 满 神秘 感 ， 一 
些 个 人 站 长 为 了 体现 自身 的 个 性 ， 也 会 运用 
一 些 暗色 调 来 表达 个 人 的 孤僻 或 者 忧郁 等 性 
格 。 如 图 3-8 所 示 为 色彩 的 明度 变化 。 

明度 高 是 指 色 彩 较 明亮 ， 而 明度 低 则 是 
指 色彩 较 灰 暗 。 没 有 明度 关系 的 色彩 ， 就 会 
显得 苍白 无 力 ， 只 有 加 入 明暗 的 变化 ， 才 可 
以 展示 色彩 的 视觉 冲击 力 和 丰富 的 层次 感 ， 
如 图 3-9 所 示 。 
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色相 、 纯 度 是 色彩 最 基本 的 三 要 素 ， 也 是 人 正常 视觉 感知 色彩 的 3 个 重要 因素 。 


#04477C 


#BD7803 


La ld) 
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图 3-8 色彩 的 明度 变化 


#049FF1 


图 3-9 同一 色彩 的 明暗 变化 


色彩 的 明度 包括 无 彩色 的 明度 和 有 彩色 
的 明度 。 在 无 彩色 中 ， 白 色 明度 最 高 ， 黑 色 
明度 最 低 ， 白 色 和 黑色 之 间 是 一 个 从 亮 到 暗 
的 灰色 系列 ， 在 有 彩色 中 ， 任 何 一 种 纯度 色 
彩 都 有 着 自己 的 明度 特征 ， 如 黄色 明度 最 高 ， 
紫色 明度 最 低 。 


3.2.3 ”纯度 

纯度 表示 色彩 的 鲜 浊 或 纯净 的 程度 ， 纯 
度 用 于 表明 一 种 颜色 中 是 否 含 有 白 或 黑 的 成 
分 。 假如 某 色 不 含有 白 或 黑 的 成 分 , 便 是 纯色 ， 
其 纯度 最 高 ， 含 有 越 多 白 或 黑 的 成 分 ， 其 纯 
度 越 低 ， 如 图 3-10 所 示 。 


图 3-10 色彩 的 纯度 变化 


< © 
第 3 章 网 页 的 色彩 搭配 “CO 人 


ER 色彩 与 心理 


千 万 年 来 的 生活 实践 ， 使 人 类 对 鲜血 的 红色 、 植 物 的 绿色 、 稳 麦 的 黄色 、 海 洋 的 蓝 色 等 各 
种 自然 色彩 中 形成 了 一 系列 共同 的 印象 ， 使 人 们 对 色彩 赋予 了 特别 的 象征 意义 。 
3.3.1 ”红色 心理 与 网 页 表现 象征 着 权力 ， 并 且 还 具有 神秘 的 宗教 色彩 。 如 

红色 的 色 感 温暖 ， 性 格 刚烈 而 外 向 ， 是 。 图 3-12 所 示 是 以 黄色 为 主 的 网 页 。 
一 种 对 人 刺激 性 很 强 的 颜色 。 红 色 容 易 引起 
人 的 注意 ， 也 容易 使 人 兴奋 、 激 动 、 紧 张 、 
冲动 , 还 是 一 种 容易 造成 人 视觉 疲劳 的 颜色 。 
在 众多 颜色 里 ， 红 色 是 最 鲜明 生动 的 、 最 热 
烈 的 颜色 。 因 此 红色 也 是 代表 热情 的 情感 之 ” 
色 。 鲜 明 的 红色 极 容易 吸引 人 们 的 目光 。 pg 

在 网 页 颜色 的 应 用 中 ， 根 据 网 页 主题 内 图 3-12 以 黄色 为 主 的 网 页 
容 的 需求 ， 纯 粹 使 用 红色 为 主 色调 的 网 站 相 浅黄 色 系 明朗、 人 愉快、 希望、 发 展 ， 它 
对 较 少 ， 多 用 于 辅助 色 、 点 睛 色 ， 达 到 陪衬 、 的 雅致 、 清 更 等 属性 ， 较 适合 用 于 女性 及 化 
醒目 的 效果 。 这 类 颜色 的 组 合 比较 容易 使 人 妆 品 类 网 站 中 ， 黄色 给 人 人 崇高、 尊贵、 辉煌 、 
提升 兴奋 度 ， 红 色 特 性 明显 ， 这 一 醒目 的 特 注意 、 扩 张 的 心理 感受 ， 深 黄色 给 人 高 贵 、 
殊 属性 ， 被 广泛 应 用 于 节日 庆典 、 食 品 、 时 ， 温 和 、 稳 重 的 心理 感受 。 
尚 休闲 、 化 妆 品 、 服 装 等 类 型 的 网 站 ， 容 易 
营造 出 娇媚 、 诱 惑 、 攀 丽 等 气氛 。 如 图 3-11 ，3.3.3 ” 蓝 色 心理 与 网 页 表现 
所 示 是 以 红色 为 主 的 饭店 网 页 。 由 于 蓝 色 给 人 以 沉稳 的 感觉 ， 且 具有 智 
慧 、 准 确 的 意象 ， 在 商业 设计 中 强调 科技 、 
效率 的 商品 或 企业 形象 ， 大 多 选用 蓝 色 作 为 
标准 色 、 企 业 色 ， 如 计算 机 、 汽 车 、 影 印 机 、 
摄影 器 材 等 。 另 外 ， 蓝 色 也 代表 忧 邦和 浪漫， 
这 个 意象 也 常 运用 于 文学 作品 或 感性 诉求 的 商 
业 设计 中 。 如 图 3-13 所 示 是 以 蓝 色 为 主 的 网 页 。 


图 3-11 以 红色 为 主 的 网 页 


3.3.2 ”黄色 心理 与 网 页 表现 
黄色 是 阳光 的 色彩 ， 具 有 活泼 与 轻快 的 特 
点 ,给 人 十 分 年 轻 的 感觉 ,象征 光明 、 希 望 、 高 贵 、 
愉快 。 它 的 亮度 最 高 ， 和 其 他 颜色 配合 很 活泼 ， 
有 温暖 感 , 具有 快乐 、 希望、 智慧 和 轻快 的 个 性 ， 
有 希望 与 功名 等 象征 意义 。 黄色 也 代表 着 土地 、 图 3-13 以 蓝 色 为 主 的 网 页 


3.3.4 ”绿色 心理 与 网 页 表现 

在 商业 设计 中 ， 绿 色 所 传达 的 是 清爽 、 
理想 、 希 望 、 生 长 的 意象 ， 符 合 服务 业 、 卫 
生 保健 业 、 教育 行 业 、 农 业 的 要 求 。 在 工厂 中 ， 
为 了 避免 操作 时 眼睛 疲劳 ， 许 多 机 械 也 采用 
绿色 ， 一 般 的 医疗 机 构 场 所 ， 也 常 采用 绿色 
来 做 空间 色彩 规划 。 如 图 3-14 所 示 是 以 绿色 
为 主 的 网 页 。 


图 3-14 以 绿色 为 主 的 网 页 


3.3.5 ”紫色 心理 与 网 页 表现 

由 于 具有 强烈 的 女性 化 性 格 ， 在 商业 设 
计 用 色 中 ， 紫 色 受到 相当 的 限制 ， 除 了 和 女 
性 有 关 的 商品 或 企业 形象 外 ， 其 他 类 型 的 设 
计 不 常 采用 为 主 色 。 如 图 3-15 所 示 是 以 紫色 
为 主 的 网 页 。 


人 全- 
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图 3-15 以 紫色 为 主 的 网 页 


32 


3.3.6 ”橙色 心理 与 网 页 表现 

柳 色 具有 和 轻快、 欢欣 、 收 获 、 温 区、 时 
尚 的 效果 ， 是 快乐 、 喜 悦 、 能 量 的 色彩 。 在 
整个 色谱 里 ， 橙 色 具 有 兴奋 度 ， 是 最 耀眼 的 
色彩 。 给 人 以 华贵 而 温暖 、 兴 奋 而 热烈 的 感觉 ， 
也 是 令 人 振奋 的 颜色 。 具 有 健康 、 富 有 活力 、 
勇敢 自由 等 象征 意义 ， 能 给 人 以 庄严 、 尊 贵 、 
神秘 等 感觉 。 检 色 在 空气 中 的 穿 透 力 仅 次 于 
红色 ， 也 是 容易 造成 视觉 疲劳 的 颜色 。 

在 用 于 网 页 的 颜色 里 ， 橙 色 适 用 于 视觉 
要 求 较 高 的 时 尚 网 站 , 属于 注目 、 芳香 的 颜色 ， 
也 常 被 用 于 味觉 较 高 的 食品 网 站 ， 是 容易 引 
起 食欲 的 颜色 。 如 图 3-16 所 示 是 以 橙色 为 主 
的 网 页 。 


图 3-16 以 橙色 为 主 的 网 页 


3.3.7 ”白色 心理 与 网 页 表现 

在 商业 设计 中 白色 具有 洁白 \ 明快 、 纯 真 、 
清洁 的 意象 , 通常 需要 和 其 他 色彩 搭配 使 用 。 
纯 白 色 给 人 以 寒冷 、 严 峻 的 感觉 ， 所 以 在 使 
用 纯 白 色 时 ， 都 会 掺 一 些 其 他 的 色彩 ， 如 象 
牙 白 、 米 白 、 乳 白 等 。 在 生活 用 品 和 服饰 用 
色 上 ， 白 色 是 永远 流行 的 颜色 之 一 ， 可 以 和 
任何 颜色 搭配 。 


3.3.8 ”黑色 心理 与 网 页 表现 


黑色 也 有 很 强大 的 感染 力 ， 它 能 够 表现 
出 特有 的 高 贵 ， 且 黑色 还 经 常用 于 表现 死亡 
和 神秘 。 在 商业 设计 中 ， 黑 色 是 许多 科技 产 
品 的 用 色 ， 如 电视 、 跪 车、 摄影机、 音响 、 
仪器 的 色彩 大 多 采用 黑色 。 在 其 他 方面 ， 黑 
色 庄 严 的 意象 也 常用 在 一 些 特 殊 场合 的 空间 
设计 。 生 活用 品 和 服饰 设计 大 多 利用 黑色 来 - 
塑造 高 贵 的 形象 。 黑 色 也 是 永远 流行 的 颜色 2 Ws 
之 一 ， 适 合 与 多 种 色彩 搭配 。 如 图 3-17 所 示 
是 以 黑色 与 灰色 为 主 的 网 页 。 图 3-17 以 黑色 与 灰色 为 主 的 网 页 


3.3.9 ”灰色 心理 与 网 页 表现 

在 商业 设计 中 ， 灰 色 具 有 柔和、 高 雅 的 
意象 ， 而 且 属 于 中 间 性 格 ， 男 女 省 能 接受 
所 以 灰色 也 是 永远 流行 的 颜色 之 一 。 许 多 高 
科技 产品 ， 尤 其 是 和 金属 材料 有 关 的 ， 几 乎 
都 采用 灰色 来 传达 高 级 、 技 术 的 形象 。 使 用 
灰色 时 ， 大 多 利用 不 同 层次 的 变化 组 合 和 与 
其 他 色彩 搭配 , 才 不 会 过 于 平淡 、 沉 闽 、 呆板 、 
僵硬 。 如 图 3-18 所 示 是 以 灰色 为 主 的 网 页 。 


图 3-18 以 灰色 为 主 的 网 页 


页 面色 彩 搭配 


网 页 的 色彩 是 树立 网 站 形象 的 关键 之 一 ， 色 彩 搭配 却 是 网 页 设计 初学 者 感到 头疼 的 问题 。 
网 页 色彩 搭配 有 哪些 原理 和 技巧 呢 ? 


3.4.1 网 页 色彩 搭配 原理 


在 选择 网 页 色彩 时 除了 考虑 网 站 本 身 的 
特点 外 ， 还 要 遵循 一 定 的 艺术 规律 ， 从 而 设 
计 出 精美 的 网 页 。 

。 色彩 的 鲜明 性 。 网 页 的 色彩 要 鲜艳 ， 

容易 引 人 注 目 ， 如 图 3-19 所 示 。 

。 色彩 的 独特 性 .要 有 与 众 不 同 的 色彩 ， 

使 得 大 家 对 你 的 设计 印象 强烈 ， 如 图 
3-20 所 示 为 色彩 独特 的 网 页 示例 。 


图 3-19 色彩 的 鲜明 性 
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图 3-20 色彩 的 独特 性 


。 色彩 的 适合 性 。 即 色彩 和 你 表达 的 内 


容 气 氛 相 适合 。 如 图 3-21 所 示 ， 用 杰 
黄色 体现 了 食品 餐饮 站 点 的 丰富 性 。 


日 日 9 


图 3-21 色彩 的 适合 性 


。 色彩 的 联想 性 。 不 同色 彩 会 产生 不 同 ， 
的 联想 ， 蓝 色 会 使 人 联想 到 天 空 ， 黑 ， 
色 会 使 人 联想 到 黑夜 ， 红 色 会 使 人 联 ， 
想到 喜事 等 ， 选 择 色彩 要 和 你 网 页 的 


内 涵 相 关联 。 
3.4.2 ”网 页 设计 中 色彩 搭配 的 技巧 


1. 用 一 种 色彩 
用 一 种 色彩 是 指 先 选 定 一 种 色彩 ， 然 后 
调整 透明 度 或 者 饱和 度 〈 也 就 是 将 色彩 变 淡 
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| 或 则 加 深 ) ， 产 生 新 的 色彩 用 于 网 页 。 这 样 
”的 页 面 看 起 来 色彩 统一 ， 有 层次 感 。 如 图 3-22 
”所 示 的 网 页 即使 用 了 同一 种 色彩 搭配 。 


图 3-22 使 用 同一 种 色彩 搭配 的 网 页 示例 


2， 原色 对 比 搭配 
色相 的 差别 虽然 是 因 可 见 光 的 长 短 差别 
”所 形成 的 ， 但 不 能 完全 根据 波长 的 差别 来 确 
， 定 色相 及 色相 的 对 比 程度 。 因 此 在 度量 色相 
， 差 时 ， 不 能 只 依靠 测 光 器 和 可 见 光谱 ， 而 应 
借助 色 环 ， 也 称 色相 环 ， 如 图 3-23 所 示 。 


图 3-23 色 环 


| 一 般 来 说 ， 色 彩 的 三 原色 ( 红 、 黄 、 蓝 ) 

”最 能 体现 色彩 间 的 差异 。 色 彩 的 对 比 强 ， 看 
起 来 就 具有 诱惑 力 ， 能 够 起 到 集中 视线 的 作 
， 用， 对 比 色 可 以 突出 重点 ， 产 生 强烈 的 视觉 
， 效 果 , 如 图 3-24 所 示 。 通 过 合理 地 使 用 对 比 色 ， 
， 能 够 使 网 站 特色 鲜明 、 重 点 突出 。 在 设计 时 


一 般 以 一 种 颜色 为 主 色调 ， 对 比 色 作为 点 组 ， 
可 以 起 到 画龙点睛 的 作用 。 


图 3-24 原色 对 比 搭配 


3. 补 色 对 比 

在 色 环 中 ， 色 相距 离 为 180” 的 为 补 色 对 
比 ， 即 位 于 色 环 直径 两 端的 颜色 为 补 色 。 一 
对 补 色 在 一 起 ， 可 以 使 对 方 的 色彩 更 加 鲜明 ， 
如 图 3-25 所 示 的 橙色 与 蓝 色 、 红 色 与 绿色 等 。 
如 图 3-26 所 示 为 补 色 对 比 的 应 用 。 


图 3-25 互补 色 


图 3-26 补 色 对 比 应 用 


第 3 章 ”网 页 的 色彩 搭配 


4. 间 色 对 比 

间 色 又 叫 “ 二 次 色 ”， 它 是 由 三 原色 调 
配 出 来 的 颜色 ， 如 红 与 黄 调 配 出 检 色 ; 黄 与 
蓝调 配 出 绿色 ; 红 与 蓝调 配 出 紫色 。 在 调配 
时 ， 由 于 原色 在 分 量 多 少 上 有 所 不 同 ， 所 以 
能 产生 丰富 的 间 色 变化 , 色相 对 比 略 显 柔 和 ， 
如 图 3-27 所 示 。 
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图 3-27 间 色 对 比 


在 网 页 色彩 搭配 中 ， 间 色 对 比 的 应 用 案 
例 很 多 ， 如 图 3-28 所 示 的 绿 与 栖 ， 这 样 的 对 
比 都 是 活泼 鲜明 具有 天 然 美的 配色 。 间 色 是 
由 三 原色 中 的 两 原色 调配 而 成 的 ， 因 此 对 视 
觉 刺 激 的 强度 相对 三 原色 来 说 缓和 不 少 ， 属 
于 较 易 搭配 之 色 。 但 仍 有 很 强 的 视觉 冲击 力 ， 
容易 带 来 轻松 、 明 快 、 愉 悦 的 气氛 。 


图 3-28 绿 与 檬 间 色 对 比 


5. 色彩 的 面积 对 比 
色彩 的 面积 对 比 是 指 页 面 中 各 种 色彩 在 


> 


网 页 设计 与 网 站 建设 完全 实战 手册 


面积 上 多 与 少 、 大 与 小 的 差别 ， 影 响 到 页 面 
的 主 次 关系 。 在 同一 视觉 范围 内 ， 色 彩 面 积 
的 不 同 ， 会 产生 不 同 的 对 比 效 果 ， 如 图 3-29 
所 示 。 


THE ALBION COLLEGE 
EUPHONICS 


图 3-29 色彩 的 面积 对 比 


当 两 种 颜色 以 相等 的 面积 比例 出 现时 ， 
这 两 种 颜色 就 会 产生 强烈 的 冲突 ， 色 彩 对 比 
自然 强烈 。 

如 果 将 比例 变换 为 3:1， 一 种 颜色 被 削弱 ， 
整体 的 色彩 对 比 也 减弱 了 。 当 一 种 颜色 在 整 
个 页 面 中 占据 主要 位 置 时 ， 则 另 一 种 颜色 只 
能 成 为 陪衬 。 这 时 ， 色 彩 对 比 效果 最 弱 。 

同一 种 色彩 , 面积 越 大 , 明度、 纯度 越 强 
面积 越 小 ， 明 度 、 纯 度 越 低 。 面 积 大 的 时 候 ， 
亮 的 颜色 显得 更 轻 ， 暗 的 颜色 显得 更 重 。 

根据 设计 主题 的 需要 ， 在 页 面 的 面积 上 
以 一 种 颜色 为 主 色 ， 其 他 的 颜色 为 次 色 ， 使 
页 面 的 主 次 关系 更 突出 ， 在 统一 的 同时 又 富 
有 变化 。 

3.4.3 ”色彩 的 数量 

一 般 初 学 者 在 设计 网 页 时 往往 使 用 多 种 
颜色 , 使 网 页 变 得 很 “ 花 ”缺乏 统一 和 协调 感 ， 
表面 上 看 起 来 很 花哨 ， 但 缺乏 内 在 的 美感 。 
事实 上 ， 网 站 用 色 并 不 是 越 多 越 好 ， 一 般 控 
制 在 3 种 色彩 以 内 ， 通 过 调整 色彩 的 各 种 属 
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性 来 产生 变化 。 只 要 控制 在 不 超出 3 种 色相 
的 范围 即 可 ,设计 用 色 越 少 越 好 ， 少 而 精 。 
如 图 3-30 所 示 。 


Florist ER 


图 3-30 色彩 的 数量 不 超过 3 种 


3.4.4 ”使 用 配色 软件 

配色 是 网 页 设计 的 关键 之 一 ， 精 心 挑选 
的 颜色 组 合 可 以 使 你 的 设计 更 有 吸引 力 ， 相 
反 ， 糟 糕 的 配色 会 伤害 眼睛 ， 妨 碍 读者 对 网 
页 内 容 和 图 片 的 理解 。 然 而 ， 很 多 时 候 设 计 
师 不 知道 如 何 搭 配 颜 色 ， 如 今 有 很 多 的 配色 
工具 帮助 你 挑选 颜色 。 

ColorJack 是 一 款 在 线 配色 工具 ， 从 球形 
的 取 色 器 中 选择 颜色 。ColorJack 会 显示 一 个 
色 表 ， 将 鼠标 指针 放 在 某 个 颜色 上 ， 会 显示 
基于 该 颜色 的 配色 主题 ， 如 图 3-31 所 示 。 
可 以 将 生成 的 配色 方案 输出 到 Tllustrator,、 
Photoshop 或 ColorJack Studio。 


图 3-31 ColorJack 配色 工具 


SO» © 
© ) 
© ~ 电 了 


第 3 意 网 页 的 色彩 搭配 ”人 a 


3.4.5 ”使 用 辅助 色 


辅助 色 的 功能 在 于 帮助 主 色 建立 更 完整 的 形象 ， 如 果 一 种 颜色 和 形式 完美 结合 ， 辅 助 色 就 
不 是 必须 存在 的 。 判 断 辅助 色 用 得 好 不 好 的 标准 是 : 去 掉 它 页 面 不 完整 ， 有 了 它 主 色 更 突出 。 
如 图 3-32 所 示 ， 这 个 页 面 中 红色 是 主 色 ， 粉 红色 是 辅助 色 ， 这 样 的 搭配 更 加 突出 了 生日 喜庆 
的 气氛 。 


图 3-32 辅助 色 
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网 页 的 排版 与 制作 


第 4 章 Dreamweaver CC 的 操作 界面 


随 着 网 络 的 快速 发 展 ， 互 联网 的 应 用 越 来 越 贴近 生活 ， 越 来 越 多 的 人 加 入 到 了 制作 网 页 的 
工作 中 来 ， 制 作 网 页 的 工具 软件 很 多 ， 目 前 使 用 最 广泛 的 就 是 Dreamweaver。Dreamweaver CC 
是 Dreamweaver 的 最 新 版 本 ， 用 于 对 站 点 、 页 面 和 应 用 程序 进行 设计 、 编 码 和 开发 ， 它 不 仅 
继承 了 前 几 个 版 本 的 出 色 功 能 ， 还 在 界面 整合 和 易 用 性 方面 更 加 贴近 用 户 。 本 章 内 容 主 要 包括 
Dreamweaver CC 软件 的 工作 界面 、 站 点 的 创建 和 管理 。 


会 ”认识 Dreamweaver CC 界面 全 管理 站 点 
全 ”创建 本 地 站 点 


认识 Dreamweaver CC 界面 


Dreamweaver CC 是 集 网 页 制作 和 网 站 管理 于 一 身 的 “所 见 即 所 得 ”的 网 页 编辑 软件 ， 它 
以 强大 的 功能 和 友好 的 操作 界面 备 受 广大 网 页 设计 者 的 欢迎 ， 已 经 成 为 网 页 制作 的 首选 软件 。 


Dreamweaver CC 的 工作 界面 主要 由 菜单 栏 、 文 档 窗口 、 属 性 面板 和 面板 组 等 部 分 组 成 , 如 图 4-1 
所 示 。 
菜单 栏 一 BW tn 和 三 日 二 看 V| 拔 ) 内 a(M】 从 SO 斧头 (S| 室 DW) 起 WhiH) Bs. ED x 
好 吃 的 理由 
最 好 的 西点 师 侍 。 保 证 所 有 会 品 只 销售 一 天 
文档 窗口 
> 目标 规则 ”boty 了 ”字体 四 口 由 /全 休 - - ~ 二 全 概要 
各 民 幅 _ Bess | [天 天 ~ | 
属性 ”面板 国 |E 水 平 四 | 匡 -| 更 吕 ，22Y 不 枚 行 外 请” 背 及 本 名 @) 厂 -| CBEEE 
-元 列 直 四 -| 高 0 韦 醒 加 口 


图 4-1 Dreamweaver CC 的 工作 界面 


4.1.1 文档 工具 栏 

文档 工具 栏 中 包含 “代码 视图 ”、“ 拆 分 视图 ”、“ 设 计 视 图 ”、“ 实 时 视图 ”等 按钮 ， 
这 些 按钮 可 以 在 文档 的 不 同 视 图 之 间 快 速 切换 ， 工 具 栏 中 还 包含 一 些 与 查看 文档 、 在 本 地 和 远 
程 站 点 之 间 传 输 文档 有 关 的 常用 命令 和 选项 ， 如 图 4-2 所 示 。 


“| 人 | 拆 分 [ 语 寺 | 允 搜 图 。 名 标 是 : 内 
图 4-2 文档 工具 栏 
六 知识 要 点 友 


。 “代码 ”: 显示 “代码 ”视图 。 只 在 “文档 ”窗口 中 显示 “代码 ”视图 。 

。 “ 拆 分 ” 显示 “代码 ”视图 和 “设计 ”视图 。 将 “文档 ”窗口 拆 分 为 “代码 ”视图 和 “ 设 
计 ” 视 图 。 当 选择 了 这 种 组 合 视图 时 ，“ 视 图 选项 ”菜单 中 顶部 的 “设计 视图 ” 选 
项 变 为 可 用 。 

。 “设计 ”: 只 在 “文档 ”窗口 中 显示 “设计 ”视图 。 如 果 处 理 的 是 XML、 
JavaScript、JAVA、CSS 或 其 他 基于 代码 的 文件 类 型 ， 则 不 能 在 “设计 ”视图 中 查看 
文件 ， 而 且 “ 设 计 ” 和 “ 拆 分 ”按钮 将 会 变 瞳 。 

。 “实时 视图 ”: 显示 浏览 器 用 于 执行 该 页 面 的 实际 代码 。 

。 “标题 ”: 允许 为 文档 输入 一 个 标题 ， 它 将 显示 在 浏览 器 的 标题 栏 中 。 如 果 文 档 已 
经 有 了 一 个 标题 ， 则 该 标题 将 显示 在 该 文本 框 中 。 

。 “文件 管理 ”: 显示 “文件 管理 ”弹出 菜单 。 

。 “在 浏览 器 中 预览 /调试 ”: 允许 在 浏览 器 中 预览 或 调试 文档 。 可 从 弹出 菜单 中 选择 
一 个 浏览 器 。 


4.1.2 ”常用 菜单 命令 
菜单 栏 包括 “文件 (F) ”、“ 编 辑 (E) ”、“ 查 看 (V) ”、“ 插 入 (I) ”、“ 修 改 (M) ”、 


“格式 (0) ”、“ 命 令 (C) ”、“ 站 点 (S) ”、“ 窗 口 (W) ”和 “帮助 (H) ”10 个 菜单 ， 
如 图 4-3 所 示 。 


DW 文 #(B 妨 纺 (E) 查看 (V) 插入 (I) 修改 (M) 格式 (0) 命令 (Q) 站点 (S) 窗口 (W) 帮助 (H) Es. Eo 
图 4-3 菜单 命令 

六 知识 要 点 女 

。 “文件 ”菜单 : 用 来 管理 文件 ， 包 括 创建 和 保存 文件 、 导 入 与 导出 文件 、 浏 览 和 打 
印 文件 等 。 

。 “编辑 ”菜单 : 用 来 编辑 文本 ， 包 括 撤销 与 恢复 、 复 制 与 粘贴 、 查 找 与 替换 、 参 数 
设置 和 快捷 键 设 置 等 。 

。 “查看 ”菜单 :用 来 查看 对 象 ， 包 括 代码 的 查看 、 网 格 线 与 标尺 的 显示 、 面 板 的 隐 
藏 和 工具 栏 的 显示 等 。 


。 “插入 ”菜单 :用 来 插入 网 页 元 素 , 包括 插入 图 像 、 多 媒体 、 表 格 、 布 局 对 象 、 表 单 、 
电子 邮件 链接 、 日 期 和 HIML 等 。 

。 “修改 ”菜单 : 用 来 实现 对 页 面 元 素 修改 的 功能 ， 包 括 页 面 属 性 、CSS 样式 、 快 速 
标签 编辑 器 、 链 接 、 表 格 、 框 架 、AP 元 素 与 表格 的 转换 、 库 和 模板 等 。 
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4.1.3 ”插入 工具 栏 


插入 栏 有 两 种 显示 方式 ， 一 种 是 以 菜 
单方 式 显示 ， 另 一 种 是 以 制 表 符 方式 显示 。 
插入 栏 中 放置 的 是 制作 网 页 过 程 中 经 常用 
到 的 对 象 和 工具 ， 通 过 插入 栏 可 以 很 方便 
地 插入 网 页 对 象 ， 有 “常用 ”插入 栏 、“ 结 
构 ” 插 入 栏 、“ 表 单 ” 插 入 栏 、“ 媒 体 ” 
插入 栏 “jQuery Mobile” 插 入 栏 、 “jQuery 
UI” 插 入 栏 、“ 模 板 ” 插 入 栏 、“ 收 藏 夹 
插入 栏 和 隐藏 标签 ， 如 图 4-4 所 示 。 


网 页 设计 与 网 站 建设 完全 实战 手册 


“格式 ”菜单 :用 来 对 文本 进行 操作 ， 包 括 字 体 、 字 形 、 字 号 、 字 体 颜色 、HTMLIL/ 
CSS 样式 、 段 落 格式 化 、 扩 展 、 缩 进 、 列 表 、 文 本 的 对 齐 方式 等 。 

“命令 ”菜单 : 收集 了 所 有 的 附加 命令 ， 包 括 应 用 记录 、 编 辑 命令 清单 、 获 得 更 
多 命令 、 扩 展 管理 、 清 除 HIML/Word HTML、 检 查 拼写 和 排序 表格 等 。 

“站 点 ”菜单 : 用 来 创建 与 管理 站 点 ， 包 括 新 建站 点 、 管 理 站 点 、 上 传 与 存 回 和 查 
看 链接 等 。 

“窗口 ”菜单 : 用 来 打开 与 切换 所 有 的 面板 和 窗口 ， 包 括 插入 栏 、“ 属 性 ”面板 、 
站 点 窗口 和 “CSS” 面 板 等 。 

“帮助 ”菜单 : 内 含 Dreamweaver 帮助 、Spry 框架 帮助 、Dreamweaver 支持 中 心 、 
产品 注册 和 更 新 等 。 


| 


个 回 是 玉昌 人 0 四 四 加 籼 回 半 
nf 
攻 


晶 


图 4-4 “常用 ”插入 工具 栏 


友 知识 要 点 女 
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Div: 可 以 使 用 Div 标签 创建 CSS 布局 块 ， 并 在 文档 中 对 它们 进行 定位 。 

HTML 5 Video: HIML 5 视频 元 素 提 供 一 种 将 电影 或 视频 嵌入 网 页 中 的 标准 方式 。 
画布 : 画布 元 素 是 动态 生成 的 图 形 的 容器 。 这 些 图 形 是 在 运行 时 使 用 脚本 语言 (如 
JavaScript) 创建 的 。 

图 像 : 在 文档 中 插入 图 像 和 导航 栏 等 ， 单 击 右 侧 的 小 三 角 ， 可 以 看 到 其 他 与 图 像 相 
关 的 按钮 。 

表格 : 建立 主页 的 基本 构成 元 素 ， 即 表格 。 

Head: 用 于 定义 网 页 文档 的 头 部 ， 它 是 所 有 头 部 元 素 的 容器 。 

脚本 : 插入 脚本 。 

Hyperlink: 创建 超 链接 。 

电子 邮件 链接 : 创建 电子 邮件 链接 ， 只 要 指定 要 链接 邮件 的 文本 和 邮件 地 址 ， 就 可 
以 自动 插入 邮件 地 址 发 送 链接 。 

水 平 线 : 在 网 页 中 插入 水 平 线 。 

日 期 : 插入 当前 时 间 和 日 期 。 

IFRAME: 插入 过 ame 代码 。 

字符 : 在 网 页 中 插入 相应 的 字符 符号 。 


4.1.4 浮动 面板 组 

Dreamweaver 中 的 面板 可 以 自由 组 合成 面 
板 组 。 每 个 面板 组 都 可 以 展开 和 折合 ， 并 且 
可 以 和 其 他 面板 组 停靠 在 一 起 或 取消 停靠 。 
面板 组 还 可 以 停靠 到 集成 的 应 用 程序 窗口 中 。 
这 样 就 能 够 很 容易 地 访问 所 需 的 面板 ， 而 不 
会 使 工作 区 变 得 混乱 ， 如 图 4-5 所 示 。 


图 4-5 浮动 面板 组 


创建 本 地 站 点 


第 4 章 Dreamweaver CC 的 操作 界面 


© OO 
O ,Yo 


(9) 


4.1.5 “属性 ”面板 


“属性 ”面板 主要 用 于 查看 和 更 改 所 选 
对 象 的 各 种 属性 ， 每 种 对 象 都 具有 不 同 的 属 
性 。 在 “属性 ”面板 包括 两 种 选项 ， 一 种 是 
“HTML” 选 项 ， 将 默认 显示 文本 的 格式 、 样 
式 和 对 齐 方式 等 属性 ， 如 图 4-6 所 示 。 另 一 种 
是 “CSS” 选 项 , 单 击 “ 属 性 ”面板 中 的 “CSS” 
选项 ， 可 以 在 “CSS” 选 项 的 “属性 ”面板 中 
设置 各 种 属性 ， 如 图 4-7 所 示 。 


四 
“9 口 “时 由 


I El 
| 


图 4-6 “属性 ”面板 


图 4-7 “CSS” 选 项 


站 点 是 管理 网 页 文档 的 场所 ，Dreamweaver CC 是 一 个 站 点 创建 和 管理 工具 ， 使 用 它 不 仅 


可 以 创建 单独 的 文档 ， 还 可 以 创建 完整 的 站 点 。 


友 知识 要 点 友 
什么 是 站 点 ? 


。 Web 站 点 : 一 组 位 于 服务 器 上 的 页 ， 使 用 Web 浏览 器 访问 该 站 点 的 访问 者 可 以 对 


其 进行 浏览 。 


。 ”远程 站 点 : 服务 器 上 组 成 Web 站 点 的 文件 ， 这 是 从 创建 者 的 角度 而 不 是 访问 者 的 


角度 来 看 的 。 


。 ”本 地 站 点 : 与 远程 站 点 的 文件 对 应 的 本 地 磁盘 上 的 文件 ， 创 建 者 在 本 地 磁盘 上 编辑 


文件 ， 然 后 上 传 到 远程 站 点 。 


在 开始 制作 网 页 之 前 ， 最 好 先 定义 一 个 站 点 ， 这 是 为 了 更 好 地 利用 站 点 对 文件 进行 管理 ， 
也 可 以 尽 可 能 地 减少 错误 ， 如 路 径 出 错 、 链 接 出 错 。 新 手 做 网 页 需要 加 强 条 理性 、 结 构 性 ， 往 


‘OOK 


往 这 个 文件 放 这 里 ， 另 一 个 文件 放 那 里 ， 或 者 所 有 文件 都 放 在 同一 文件 夹 内 ， 这 样 显得 很 乱 。 
建议 一 个 文件 夹 用 于 存放 网 站 的 所 有 文件 ， 再 在 文件 内 建立 几 个 文件 夹 ， 将 文件 分 类 ， 如 图 片 
文件 放 在 images 文件 夹 内 ，HTML 文件 放 在 根 目录 下 。 如 果 站 点 比较 大 ， 文 件 比 较 多 ， 可 以 
先 按 栏目 分 类 ， 在 栏目 里 再 分 类 。 使 用 向 导 创 建站 点 的 具体 操作 步骤 如 下 : 

加 执行 “站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 单 击 “ 新 建站 点 ” 
按钮 ， 如 图 4-8 所 示 。 
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吗 单 击 “ 选 择 文件 夹 ” 按 钮 ， 选 择 文件 位 置 ， 
如 图 4-11 所 示 。 


Dreamweaver 站 点 是 网 站 中 全 用 的 所 有 文件 和 海源 的 集合 。Draamweaver 


Ee 


ed GAZ | 


图 4-8 “管理 站 点 ”对 话 框 


醒 弹 出 “站 点 设置 对 象 未 命名 站 点 2” 对 话 框 ， 一 ee 
在 对 话 框 中 的 “站 点 名 称 ”文本 框 中 输入 名 称 ， 图 4-11 选择 文件 的 位 置 
如 图 4-9 所 示 。 


号 单 击 “ 保 存 ” 按 钮 返回 到 “管理 站 点 ”对 话 框 ， 


一 一 一 | ET 人 i a 对 话 框 中 显示 了 新 建 的 站 点 , 如 图 4-12 所 示 。 


证- 


图 4-9 输入 站 点 的 名 称 


玄 提示 紊 图 4-12 “管理 站 点 ”对 话 框 


执行 “窗口 ”| “文件 ”命令 , 打开 “ 文 ” 醒 单 击 “ 完 成 ”按钮 ， 在 “文件 ”面板 中 可 
件 ” 面 板 , 在 面板 中 单 击 “ 管 理 站 点 ” 超 链接 ， ， 以 看 到 创建 的 站 点 中 的 文件 , 如 图 4-13 所 示 。 
也 可 以 弹出 “管理 站 点 ”对 话 框 。 


EE = 

喇 单 击 “ 本 地 站 点 文件 夹 ”文本 框 右 边 的 文 妈 @Gl3 人 2 全 加 | 口 

件 夹 按钮 甸 ， 弹 出 “选择 根 文件 夹 ” 对 话 框 ， SD 0 RR 刘 
在 对 话 框 中 选择 相应 的 位 置 , 如 图 4-10 所 示 。 

图 4-10 “选择 根 文件 夹 ” 对 话 框 图 4-13 “文件 ”面板 
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友 指点 迷津 女 
在 规划 站 点 结构 时 ， 需 要 遵循 的 规则 如 下 : 


。 每 个 栏目 一 个 文件 夹 ， 把 站 点 划分 为 多 个 目录 。 


。 不 同类 型 的 文件 放 在 不 同 的 文件 夹 中 ， 


以 利于 调用 和 管理 。 


。 在 本 地 站 点 和 远 端 站 点 使 用 相同 的 目录 结构 ， 使 在 本 地 制作 的 站 点 原封 不 动 地 显示 


出 来 。 


管理 站 点 
在 Dreamweaver CC 中 ， 可 以 对 本 地 站 点 进 


4.3.1 打开 站 点 


当 运 行 Dreamweaver CC 后 ， 系 统 会 自动 
打开 上 次 退出 Dreamweaver CC 时 编辑 的 站 点 。 
如 果 想 打开 另外 一 个 站 点 ， 在 “文件 ” 
面板 左边 的 下 拉 列 表 框 中 会 显示 已 定义 的 所 
有 站 点 ， 如 图 4-14 所 示 。 在 下 拉 列 表 框 中 选 
择 需 要 打开 的 站 点 ， 即 可 打开 已 定义 的 站 点 。 


+ | 
| EE 
FE Ee 
se 
本 地 开盘 人:) Eg 

| 
JP | 
划 ”To 
图 4-14 打开 站 点 

4.3.2 ”编辑 站 点 


呀 创建 站 点 后 ， 可 以 对 站 点 进行 编辑 ， 执 行 
“站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ” 
对 话 框 ， 在 对 话 框 中 单 击 “ 编 辑 当 前 选 定 的 
站 点 ”按钮 ， 如 图 4-15 所 示 。 

砚 即 可 弹出 “站 点 设置 对 象 实例 素材 ”对 
话 框 ， 在 “高 级 ”选项 卡 中 可 以 编辑 站 点 的 


行 管理 ， 如 打开 、 编 辑 、 删 除 和 复制 站 点 等 。 
相关 信息 ， 如 图 4-16 所 示 。 


我 相 对 于， 福 下。 避让 5 可 有 洒 


WebuRL TE 


a 


[= 项 ][ 陨 | 


图 4-16 编辑 站 点 
可 编 辑 完毕 后 ， 单 击 “ 确 定 ” 按 钮 返回 到 
“管理 站 点 ”对 话 框 ， 单 击 “ 完 成 ”按钮 ， 
即 可 完成 站 点 的 编辑 。 
4.3.3 ”删除 站 点 
0 如 果 不 再 需要 站 点 ， 可 以 将 其 从 站 点 下 拉 
列表 框 中 删除 , 执行 “站 点 ”|“ 管 理 站 点 ”命令 ， 
弹出 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 选中 
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网 页 设计 与 网 站 建设 完全 实战 手册 


要 删除 的 站 点 ， 单 击 “ 删 除 当前 选 定 的 站 点 ” ee 
按钮 ， 如 图 4-17 所 示 。 


该 操作 只 是 删除 了 Dreamweaver 同 该 站 
点 之 间 的 关系 ， 实 际 上 本 地 站 点 内 容 ， 包 括 
文件 夹 和 文档 等 ， 都 仍然 保存 在 磁盘 相应 的 
位 置 ， 可 以 重新 创建 指向 其 位 置 的 新 站 点 ， 
重新 对 其 进行 管理 。 


4.3.4 复制 站 点 


执行 “站 点 ” |“ 管理 站 点 ”命令 ， 弹 出 
= | “管理 站 点 ”对 话 框 ， 在 对 话 框 中 选中 要 复 
国 417 单 让 “列队 当前 选 定 的 站 点 ” 掖 馈 。 。 制 的 站 点 , 单 击 “复制 当前 选 定 的 站 点 ”按钮 ， 
如 图 4-19 所 示 ， 即 可 复制 该 站 点 ， 新 复制 出 


枉 弹 出 “Dreamweaver” 提 示 对 话 框 ， 询 问 。 的 站 点 名 称 会 出 现在 “管理 站 点 ”对 话 框 的 
用 户 是 否 要 删除 本 地 站 点 ， 如 图 4-18 所 示 。 站 点 列表 中 ， 单 击 “完成” 按钮， 完成 对 站 
单 击 “ 是 ”按钮 ， 即 可 将 本 地 站 点 删除 。 。 点 的 复制。 


图 4-18 “Dreamweaver ”提示 对 话 框 


综合 实战 一 创建 本 地 站 点 


要 制作 一 个 网 站 ， 第 一 步 操作 都 是 一 样 的 ， 即 创建 一 个 “站 点 ”， 这 样 可 以 使 整个 网 站 的 
脉络 结构 清晰 地 展现 在 眼前 ， 避 免 了 以 后 再 进行 纷 杂 的 管理 。 站 点 是 管理 网 页 文档 的 场所 ， 
Dreamweaver CC 是 一 个 站 点 创建 和 管理 的 工具 ， 使 用 它 不 仅 可 以 创建 单独 的 文档 ， 还 可 以 创 
建 完 整 的 站 点 。 

丽 执行 “站 点 ”| “管理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 在 对 话 框 中 单 击 “ 新 建站 点 ” 
按钮 ， 如 图 4-20 所 示 。 

醒 弹 出 “站 点 设置 对 象 未 命名 站 点 2” 对 话 框 ， 在 对 话 框 中 的 “站 点 名 称 ” 文 本 框 中 输入 名 称 
如 图 4-21 所 示 。 

鹃 单 击 “ 本 地 站 点 文件 夹 ” 文 本 框 右边 的 文件 夹 按钮 天 ， 弹 出 “选择 根 文件 夹 ”对 话 框 ， 在 
对 话 框 中 选择 相应 的 位 置 ， 如 图 4-22 所 示 。 

页 单 击 “ 选 择 文件 夹 ”按钮 ， 选 择 文件 位 置 ， 如 图 4-23 所 示 。 


图 4-19 复制 站 点 


0 本 


ED 


让 各 为 Dremmenve 让 上 放手 本 地 牢 吉 年。 


ETD 
| 


图 4-21 输入 站 点 的 名 称 


rsamweaver 站 点 是 网 站 中 全 用 的 所 有 文 | 


pr 


和 以 在 化 为 preamwesve 外 上 志和 本 地 牢 玉 名 邱 。 
Ma: 


图 4-22 “选择 根 文件 夹 ” 对 话 框 图 4-23 选择 文件 的 位 置 


枉 单 击 “ 保 存 ” 按 钮 返回 到 “管理 站 点 ”对 话 框 ， 对 话 框 中 显示 了 新 建 的 站 点 ， 如 图 4-24 
所 示 。 


06 单 击 “完成 ”按钮 ， 在 “文件 ”面板 中 可 以 看 到 创建 的 站 点 中 的 文件 ， 如 图 4-25 所 示 。 


ee 
EE 
ee 
一 了 站台 
EE 于 到 i ee 
记 和 项 一 | CE 


图 4-24 “管理 站 点 ”对 话 框 
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本 章 小 结 


Dreamweaver CC 提供 了 一 个 崭新 、 高 效 的 操作 界面 ， 性 能 也 得 到 了 改进 。 此 外 ， 还 包含 
了 众多 新 增 功能 ， 改 善 了 软件 的 易 用 性 ， 用 户 无 论 是 使 用 设计 视图 还 是 使 用 代码 视图 ， 都 可 以 
方便 地 创建 网 页 。 本 章 主要 讲述 了 Dreamweaver CC 工作 界面 、 创 建 本 地 站 点 、 管 理 站 点 等 ， 
通过 本 章 的 学 习 ， 读 者 可 以 初步 了 解 和 认识 Dreamweaver CC， 并 学 会 利用 其 灵活 的 界面 设计 
来 创造 属于 自己 的 工作 环境 。 
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第 章 在 Dreamweaver 中 使 用 文本 


Dreamweaver CC 是 业界 领先 的 Web 开发 工具 ， 使 用 该 工具 可 以 高 效 地 设计 、 开 发 和 维护 
网 站 。 利 用 Dreamweaver CC 中 的 可 视 化 编辑 功能 ， 可 以 快速 地 创建 网 页 ， 而 不 需要 编写 任何 
代码 ， 这 对 于 网 页 制作 者 来 说 ， 工 作 变 得 更 轻松 。 文 本 是 网 页 中 最 基本 和 最 常用 的 元 素 ， 是 网 
页 信息 传播 的 重要 载体 。 学 会 在 网 页 中 使 用 文本 和 设置 文本 格式 ， 对 于 网 页 设计 人 员 来 说 是 至 
关 重 要 的 。 


技术 要 点 
令 ”输入 文本 令 ”设置 列表 
令 ”插入 其 他 文本 元 素 全 ”创建 文本 网 页 实例 


输入 文本 


- 般 来 说 ， 网 页 中 显示 最 多 的 是 文本 ， a 页 设计 中 占 了 很 大 的 
比例 ， 能 否 对 各 种 文本 控制 手段 运用 自如 ， 是 决定 网 页 设计 是 否 美观 、 是 否 富有 创意 及 能 否 提 
高 工作 效率 的 关键 。 


5.1.1 在 网 页 中 插入 文本 

文本 是 基本 的 信息 载体 ， 是 网 页 中 的 基 
本 元 素 ， 浏览 网 页 时 ， 获 取信 息 最 直接 、 最 
直观 的 方式 就 是 通过 文本 。 在 Dreamweaver 
中 添加 文本 的 方法 非常 简单 ， 如 图 5-1 所 示 
为 网 页 添加 文本 后 的 效果 ， 具 体操 作 步 骤 
如 下 : 


Tp pe 和， 和 
于 ee 
7 生机 让 生生 者 挤 汪 


原始 文件 : | 原始 文件 /CHO5/5.1.1/index.html ON 


二 


SN ses Mn, aaa me 


最 终 文件 : | 最 终 文件 /CH0S/5.1.Uindexl html 


友 提示 友 A A io en 
A 


网 页 文本 的 编辑 是 网 页 制作 最 基本 的 操 em me POA ah 
emir 


作 ， 灵 活 应 用 各 种 文本 属性 可 以 排版 出 更 加 PN 


美观 、 条 理 清晰 的 网 页 。 文 本 属性 较 多 ,各 | sr 
种 设置 比较 详细 ， 在 学 习 时 不 要 着 急 ， 一 点 | see 


人 
ee 


ee 7 


呀 打开 网 页 文档 ， 如 图 5-2 所 示 。 图 5-1 添加 文本 


图 5-2 打开 网 页 文档 


吧 将 光标 置 于 要 输入 文本 的 位 置 ， 输 入 文本 ， 
如 图 5-3 所 示 。 


上 TR 
or 让 区 二 情怀 上 业 人 
ret 
和 
她 则 可 本 同名 妈 性 站 名 权 王 次 了 和 六 


才 吉 是 部 和 着 人 用 一 让 一 的 怕人 经营 岂 的， 而 自由 计 和 二 全 和 | 
oe 特 全 表 的 加 失地 之/ 则 和 在 小 央 和。 省 吉 妇 二 和 和 不。 昌 册 的 各 明 认 


人 


图 5-3 输入 文本 


酌 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 如 图 5-1 所 示 。 


六 提示 友 

插入 普通 文本 还 有 一 种 方法 : 从 其 他 应 
用 程序 中 复制 ， 然 后 粘贴 到 Dreamweaver 文 
档 窗口 中 。 在 添加 文本 时 还 要 注意 根据 用 户 
语言 的 不 同 ， 选 择 不 同 的 文本 编码 方式 ， 错 
误 的 文本 编码 方式 将 使 中 文 显示 为 乱码 。 


5.1.2 ”改变 字体 

字体 对 网 页 中 的 文本 来 说 是 非常 重要 的 ， 
Dreamweaver 中 自 带 的 字体 比较 少 ， 可 以 在 
Dreamweaver 的 字体 列表 中 添加 更 多 的 字体 ， 
添加 新 字体 的 具体 操作 步骤 如 下 : 
国 使 用 Dreamweaver 打 开 网 页 文档 , 在 “属性 ” 
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面板 中 单 击 “ 字 体 ” 下 拉 列 表 框 右边 的 小 三 
角 , 在 弹出 的 列表 框 中 选择 “管理 字体 ”选项 ， 
如 图 5-4 所 示 。 


图 5-4 选择 “管理 字体 ”选项 


可 弹出 “管理 字体 ”对 话 框 ， 在 对 话 框 中 选 
择 “ 自 定义 字体 堆栈 ”选项 卡 ,在 “可 用 字体 ” 
列表 框 中 选择 要 添加 的 字体 ， 单 击 [Es 按钮 
添加 到 左 侧 的 “选择 的 字体 ”列表 框 中 , 在 “ 字 
体 列表 ”列表 框 中 也 会 显示 新 添加 的 字体 ， 
如 图 5-5 所 示 。 重 复 以 上 操作 即 可 添加 多 种 字 
体 ， 若 要 取消 已 添加 的 字体 ， 可 以 在 选中 该 
字体 后 单 击 王 汪 按钮 。 


图 5-5 


“管理 字体 ”对 话 框 


03 完成 一 个 字体 样式 的 编辑 后 ， 单 击 由 按钮 


可 进行 下 一 个 样式 的 编辑 。 若 要 删除 某 个 已 
经 编辑 的 字体 样式 ， 可 以 在 选中 该 样式 后 单 
击 加 按钮。 完成 字体 样式 的 编辑 后 ， 单 击 “ 完 
成 ”按钮 关闭 该 对 话 框 ， 在 文档 窗口 中 可 以 
看 到 应 用 字体 ， 如 图 5-6 所 示 。 
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第 5 章 在 Dreamweaver 中 使 用 文本 
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本 主人/ 旺 宇 。 人 力克 二) 过 和 更 的 互生 去 关 


图 5-6 设置 字体 


5.1.3 ”设置 文字 大 小 
选择 一 种 合适 的 字号 ， 是 网 页 美观 、 布 
局 合理 的 关键 。 在 设置 网 页 时 ， 应 对 文本 设 
置 相应 的 字体 、 字 号 ， 具 体操 作 步 骤 如 下 : 
叫 选 中 文本 ， 在 “属性 ”面板 的 “大 小 ”组 
合 框 中 选择 字号 ， 或 者 直接 输入 相应 大 小 的 
字号 ， 如 图 5-7 所 示 。 
0 选择 字号 后 即 可 完成 字体 大 小 的 设置 ， 如 
图 5-8 所 示 。 


| 
[na 
ema ema | 

me 


图 5-8 设置 字体 大 小 


un 


插入 其 他 文本 元 素 


在 网 页 中 除了 输入 文本 外 ， 还 可 以 插入 其 他 元 素 ， 如 插入 特殊 字符 、 水 平 线 、 时 间 、 注 释 
等 ， 下 面 分 别 介绍 这 些 元 素 的 插入 。 


5.2.1 插入 特殊 字符 

制作 网 页 时 ， 有 时 要 输入 一 些 键盘 上 没有 的 特殊 字符 ， 如 日 元 符号 、 注 册 商 标 等 ， 这 就 需 
要 使 用 Dreamweaver 的 特殊 字符 功能 。 下 面 通过 插入 版 权 符号 讲述 特殊 字符 的 添加 ， 效 果 如 图 
5-9 所 示 ， 具 体操 作 步 骤 如 下 : 
原始 文件 : 原始 文件 /CH05/5.2.Uindex.html 
最 终 文件 : 最 终 文件 /CH05/5.2.1/index1.html 

广 提示 女 


许多 浏览 器 (尤其 是 旧版 本 的 浏览 器 ， 以 及 除 Netscape Netvigator 和 Internet Explorer 外 
的 其 他 浏览 器 ) 无 法 正常 显示 很 多 特殊 字符 ， 因 此 应 尽量 少 用 特殊 字符 。 
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文 表 作 制品 有 限 公司 03 选择 命令 后 , 即 可 插入 版 权 字符 , 如 图 5-12 


= ER 


| WE 


RE 站 郴 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 


果 如 图 5-9 所 示 。 
而 打开 网 页 文档 ， 将 光标 置 于 要 插入 版 权 符 ee 
号 的 位 置 ， 如 图 5-10 所 示 。 5.2.2 插入 水 平 线 


很 多 网 页 在 其 下 方 会 显示 一 条 水 平 线 ， 
以 分 割 网 页 主题 内 容 和 底 端 的 版 权 声明 等 。 
根据 设计 需要 ， 也 可 以 在 网 页 任意 位 置 添加 
水 平 线 ， 达 到 区 分 网 页 中 不 同 内容 的 目的 。 
下 面 通过 实例 讲述 如 何在 网 页 中 插入 水 平 线 ， 
效果 如 图 5-13 所 示 ， 具 体操 作 步 又 如 下 : 


图 5-10 打开 网 页 文档 


卓 执 行 “ 插 入 ”|“ 字 符 ”|“ 版 权 ” 命 令 ， 妇 
图 5-11 所 示 。 


Dw 


图 5-13 插入 水 平 线 的 效果 


图 5-11 执行 “版 权 ” 命 令 
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原始 文件 ， | 原始 文件 /CH05/5.2.2/index html 
最 终 文件 ，| 最 终 文件 /CHO5/5.2.2/indexl html 


网 打开 网 页 文档 ， 将 光标 置 于 要 插入 水 平 线 
的 位 置 ， 如 图 5-14 所 示 。 


[7 BY SN MM Ro 0 a 0 


图 5-14 打开 网 页 文档 


02 执行 “插入 ”|“ 水 平 线 ” 命 令 ， 如 图 5-15 
所 示 。 


DW zn mnd we we 0 e010 wn 


图 5-15 插入 水 平 线 


大 选择 命令 后 ， 即 可 插入 水 平 线 ， 如 图 5-16 
所 示 。 


图 5-16 插入 水 平 线 


第 5 章 在 Dreamweaver 中 使 用 文本 
咀 选 中 插入 的 水 平 线 ， 打 开 “ 属 性 ”面板 

在 面板 中 将 “ 宽 ” 设 置 为 700、“ 高 ”设置 为 
1、“ 对 齐 ” 设 置 为 居中 对 齐 ， 如 图 5-17 所 示 。 


可 GOEISCE 


图 5-17 设置 水 平 线 


西 打开 “代码 ”视图 ， 输入 颜色 代码 
color=“#002C11”， 将 水 平 线 的 颜色 设置 为 
绿色 ， 如 图 5-18 所 示 。 

三 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 如 图 5-13 所 示 。 


图 5-18 设置 水 平 线 的 颜色 


5.2.3 ”插入 时 间 

当 需 要 在 网 页 的 指定 位 置 插入 准确 的 日 
期 资料 时 ， 可 以 执行 “插入 ”| “日 期 ”命令 。 
添加 日 期 的 好 处 是 : 既 可 以 选用 不 同 的 日 期 
格式 ， 规 范 而 准确 地 表达 日 期 ， 同 时 还 可 以 
设置 自动 更 新 ， 让 网 页 显示 当前 最 新 的 日 期 
和 时 间 。 

下 面 通过 实例 讲述 如 何在 网 页 中 插入 日 
期 ， 插 入 日 期 的 效果 如 图 5-19 所 示 ， 具 体操 
作 步 骤 如 下 : 


51 


图 5-22 “插入 日 期 ”对 话 框 


哑 单 击 “ 确 定 ” 按 钮 ， 即 可 插入 日 期 ， 如 图 
5-23 所 示 。 


图 5-19 插入 时 间 效 果 


原始 文件 ， | 原始 文件 /CHO5/5.2.3/index.html 
最 终 文件 ， | 最 终 文件 /CH05/5.2.3/indexl.html 


04 打开 网 页 文档 ， 如 图 5-20 所 示 。 


图 5-23 插入 日 期 


5.2.4 ”插入 空格 
在 做 网 页 的 时 候 ， 有 时 需要 输入 空格 

但 却 无 法 输入 。 导 致 无 法 正确 输入 空格 的 原 

因 可 能 是 输入 法 的 错误 ， 只 有 正确 使 用 输入 

法 才能 够 解决 这 个 问题 。 在 字符 之 间 添 加 空 
图 5-20 打开 网 页 文档 格 的 方法 非常 简单 ， 效 果 如 图 5-24 所 示 ， 具 

本 将 光标 置 于 要 插入 日 期 的 位 置 ， 执行 “ 插 ”体操 作 步 又 如 下 : 

入 ”| “日 期 ”命令 ， 如 图 5-21 所 示 。 


Bw 5 本 而 GEiaLE 


图 5-21 插入 水 平 线 


08 选择 命令 后 ， 弹 出 “插入 日 期 ”对 话 框 ， 
在 对 话 框 中 设置 相应 的 格式 , 如 图 5-22 所 示 。 图 5-24 在 字符 之 间 添 加 空格 的 效果 
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原始 文件 : | 原始 文件 /CH05/5.2.4/index.html 
最 终 文件 ， | 最 终 文件 /CH05/5.2.4/index1.html 


吧 打开 网 页 文档 ， 将 光标 置 于 要 添加 空格 的 位 置 ， 如 图 5-25 所 示 。 
02 切换 到 “ 拆 分 ”视图 ， 输 入 &nbsp: 代码 ， 如 图 5-26 所 示 。 在 “ 拆 分 ”视图 中 输 几 次 代码 ， 
在 “设计 ”视图 中 就 会 出 现 几 个 空格 。 


图 5-25 打开 网 页 文档 图 5-26 输入 代码 
吗 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 参 见 图 5-24 所 示 。 
太 提 示 友 


在 字符 之 间 要 插入 连续 的 空格 ， 可 执行 “插入 ”| “字符 ”|“ 不 换行 空格 ”菜单 命令 ， 
或 者 按 快捷 键 Ctrl+Shift+ 空格 键 。 实 际 是 在 代码 中 添加 了 “&nbsp;” 这 个 字符 。 


六 高 手 支 招 女 

还 可 以 使 用 以 下 两 种 方法 插入 空格 : 

。 ”如果 使 用 智能 ABC 输入 法 ， 按 快捷 键 Shift+ 空格 键 ， 这 时 输入 法 属性 栏 上 的 半月 形 
就 变 成 了 圆 形 ， 然 后 再 按 空 格 键 ， 空 格 就 出 来 了 。 

。 在 “常用 ”插入 栏 的 “字符 ”下 拉 列 表 选 择 “ 不 换行 空格 ”选项 ， 就 可 直接 输入 空格 。 


列表 的 设置 


在 网 页 编辑 过 程 中 ， 有 时 会 使 用 列表 。 包 含 层 次 关系 、 并 列 关 系 的 标题 都 可 以 制作 成 列表 
形式 ， 这 样 有 利于 访问 者 理解 网 页 内 容 。 列 表 包 括 项 目 列表 和 编号 列表 ， 下 面 分 别 介绍 。 
5.3.1 使 用 项 目 列表 

项 目 列表 又 称 无 序列 表 ， 这 种 列表 的 项 目 之 闻 没 有 先后 顺序 。 项 目 列表 前 面 一 般 用 项 目 符 
号 作为 前 导 字符 ， 如 图 5-27 所 示 是 创建 的 项 目 列表 效果 ， 有 具体 操作 步骤 如 下 : 


原始 文件 /CH05/5.3.1/index.html 


最 终 文件 /CH05/5.3.1/index1.html 


© © © 
0 


@ 


网 页 设计 与 网 站 建设 完全 实战 手册 


03 选择 命令 后 , 即 可 创建 项 目 列表 , 如 图 5-30 
所 示 。 


图 5-30 创建 项 目 列表 


咀 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 5-27 所 示 。 


图 5-27 创建 项 目 列表 效果 5.3.2 使 用 编号 列表 
0 打开 网 页 文档 ， 将 光标 置 于 要 创建 项 目 列 当 网 页 内 的 文本 需要 按 顺 序 排列 时 ， 就 
表 的 位 置 ， 如 图 5-28 所 示 。 应 该 使 用 编号 列表 。 编 号 列表 的 项 目 符号 可 


| 以 是 阿拉 伯 数 字 、 罗 马 数字 或 英文 字母 中 。 
| 如 图 5-31 所 示 是 创建 的 编号 列表 效果 ， 具 体 


操作 步骤 如 下 : 


aaganemnuanr aasar manana wena 
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[= 
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图 5-28 打开 网 页 文档 


吗 执行 “格式 ”|“ 列 表 ”| “项目 列表 ”命令 ， 
如 图 5-29 所 示 。 


py pm 
NR 


原始 文件 /CH05/5.3.2/index.html 
最 终 文件 /CH05/5.3.2/indexl.html 


0 打开 网 页 文档 ， 将 光标 置 于 要 创建 编号 列 


因 5 执行 顺 目 列表” 全 人 SE 
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第 5 章 在 Dreamweaver 中 使 用 文本 


图 5-32 打开 网 页 文档 


0 执行 “格式 ”| “列表 ”|“ 编 号 列表 ”命令 ， 
如 图 5-33 所 示 。 
节选 择 命令 后 , 即 可 创建 编号 列表 , 如 图 5-34 
所 示 。 
逻 保 存 文档 ， 按 Fl2 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 5-31 所 示 。 

广 提示 妇 

单 击 “ 属 性 ”面板 中 的 “编号 列表 ” 按 
钮 扶 ， 也 可 以 创建 编号 列表 。 


图 5-34 创建 编号 列表 


实战 应 用 一 一 创建 文本 网 页 实例 


下 面 通过 本 章 所 学 的 知识 讲述 如 何 创建 基本 的 文本 网 页 ， 效 果 如 图 5-35 所 示 ， 具 体操 作 
步骤 如 下 : 


图 5-35 基本 的 文本 网 页 效果 


原始 文件 : 原始 文件 /CH05/5.4/index.html 
最 终 文件 : 最 终 文件 /CH05/5.4/index1.html 


丽 打开 网 页 文档 ， 如 图 5-36 所 示 。 三 设 置 文本 的 颜色 。 单 击 “ 文 本 颜色 ” 按 
钮 ， 在 打开 的 调 色 板 中 设置 文本 的 颜色 为 
#923410， 如 图 5-39 所 示 。 


图 5-36 打开 网 页 文档 


芭 将 光标 置 于 要 输入 文字 的 位 置 ， 输 入 文字 ， 
如 图 5-37 所 示 。 图 5-39 设置 文本 颜色 


丁 执 行 “插入 ”| “字符 ”| “版 权 ” 命令 ， 
如 图 5-40 所 示 。 
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图 5-37 输入 文字 


本 将 光标 置 于 文字 开头 ， 按 住 刀 标 左 键 向 下 2 = 

拖 动 至 文字 结尾 ， 选 中 所 有 的 文字 ， 在 “属性 ” 图 5-40 执行 “版 权 " 命 人 
面板 中 打开 “大 小 ”下 拉 列 表 ， 选 择 文字 的 大 ， . 
二 而 国庆 二 西 选择 命令 后 ,插入 版 权 字符 ,如 图 5-41 所 示 。 


图 5-38 选择 字号 图 5-41 插入 版 权 符号 


56 


0 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 参 见 图 5-35 所 示 。 


本 章 小 结 
本 章 主要 介绍 了 Dreamweaver CC 中 文本 的 输入 、 文 本 属性 设置 、 其 他 文本 元 素 的 插入 及 
列表 的 设置 。 通 过 对 以 上 知识 的 学 习 及 了 解 ， 读 者 能 够 更 好 地 结合 后 面 章节 ， 创 建 出 更 切合 实 


际 需求 、 更 具有 吸引 力 的 网 页 。 
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第 @ 章 利用 图 像 和 多 媒体 美化 网 页 


本 章 我 们 将 学 习 使 用 图 像 和 多 媒体 来 制作 出 华丽 而 且 动感 十 足 的 网 页 。 图 像 有 着 丰富 的 色 
彩 和 表现 形式 ， 恰 当地 利用 图 像 可 以 加 深入 们 对 网 站 的 印象 。 这 些 图 像 是 文本 的 说 明 及 解释 ， 
可 以 使 文本 清晰 易 读 ， 更 加 具有 吸引 力 。 随 着 网 络 技术 的 不 断 发 展 ， 人 们 已 经 不 再 满足 于 静态 
网 页 ， 而 目前 的 网 页 也 不 再 是 单一 的 文本 ， 图 像 、 声 音 、 视 频 和 动画 等 多 媒体 技术 更 多 地 应 用 
到 了 网 页 之 中 。 


全 ”网 页 中 常用 的 图 像 格式 令 添加 声音 

令 ”添加 图 像 争 插入 动态 媒体 元 素 
令 在 网 页 中 简单 地 编辑 图 像 令 插入 视频 

争 ”插入 其 他 图 像 元 素 


网 页 中 常用 的 图 像 格式 


网 页 中 图 像 的 格式 通常 有 3 种 ， 即 GIF、JPEG 和 了 PNG。 目 前 GIF 和 JPEG 文件 格式 的 
支持 情况 最 好 ， 大 多 数 浏 览 器 都 可 以 查看 这 两 种 格式 的 文件 。 由 于 PNG 文件 具有 较 大 的 灵活 
性 ， 并 且 文 件 较 小 ， 所 以 它 对 几乎 任何 类 型 的 网 页 图 像 都 是 最 适合 的 。 但 是 Microsoft Internet 
Explorer 和 Netscape Navigator 只 能 部 分 支持 PNG 图 像 的 显示 。 建 议 使 用 GIF 或 JPEG 格式 以 


6.1.1 GIF 格式 


GIF 是 英文 单词 Graphic Interchange Format 的 缩写 ， 即 图 像 交 换 格式 ， 文 件 最 多 使 用 256 
种 颜色 ， 最 适合 显示 色调 不 连续 或 具有 大 面积 单一 颜色 的 图 像 ， 例 如 导航 条 、 按 钮 、 图 标 、 徽 
标 或 其 他 具有 统一 色彩 和 色调 的 图 像 。 


GIF 格式 的 最 大 优点 就 是 制作 动态 图 像 ， 可 以 将 数 张 静态 文件 作为 动画 帧 串联 起 来 ， 转 换 
成 一 张 动画 文件 。 
GIF 格式 的 另 一 优点 就 是 可 以 将 图 像 以 交错 的 方式 在 网 页 中 呈现 。 所 谓 交 错 显示 ， 就 是 当 


图 像 尚未 下 载 完 成 时 ， 浏 览 器 会 先 以 马赛 克 的 形式 将 图 像 慢 慢 显 示 ， 让 浏览 者 可 以 大 略 猜 出 正 
在 下 载 图 像 的 雏形 。 
6.1.2 JPEG 格式 


JPEG 是 英文 单词 Joint Photographic Experts Group 的 缩写 ， 它 是 一 种 图 像 压缩 格式 ， 文 件 
格式 是 用 于 摄影 或 连续 色调 图 像 的 高 级 格式 ， 这 是 因为 PEG 文件 可 以 包含 数 百 万 种 颜色 。 随 
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se 人 


_ 0 人 
第 6 章 利用 图 像 和 多 媒体 美化 网 页 。 人 仿 ( 


着 JPEG 文件 品质 的 提高 ， 文 件 的 大 小 和 下 载 时 间 也 会 随 之 增加 。 通 常 可 以 通过 压缩 JPEG 文 
件 在 图 像 品 质 和 文件 大 小 之 间 达 到 良好 的 平衡 。 

JPEG 格式 是 一 种 压缩 格式 ， 专 门 用 于 不 含 大 色 块 的 图 像 。JPEG 图 像 有 一 定 的 失真 度 ， 但 
是 在 正常 的 损失 下 肉眼 分 辨 不 出 JPEG 和 GIF 图 像 的 区 别 ， 而 JPEG 文件 只 有 GIF 文件 的 1/4 
大 小 。JPEG 格式 对 图 标 之 类 的 含 大 色 块 的 图 像 不 是 很 有 效 ， 而 且 不 支持 透明 图 、 动 态 图 ， 但 
它 能 够 保留 全 真 的 色调 板 格式 。 如 果 图 像 需 要 全 彩 模式 才能 表现 效果 , JPEG 就 是 最 佳 的 选择 。 


6.1.3 PNG 格式 


PNG 是 英文 单词 Portable Network Graphic 的 缩写 ， 即 便携 网 络 图 像 ， 是 一 种 替代 GIF 
格式 的 无 专利 权限 制 的 格式 ， 它 包括 对 索引 色 、 灰 度 、 真 彩色 图 像 及 Alpha 通道 透明 的 支 
持 。PNG 是 Fireworks 固有 的 文件 格式 。PNG 文件 可 保留 所 有 原始 层 、 矢 量 、 颜 色 和 效果 信 
息 ， 并 且 在 任何 时 候 所 有 元 素 都 是 可 以 完全 编辑 的 。 文 件 必 须 具 有 .png 文件 扩展 名 才能 被 
Dreamweaver 识别 为 PNG 文件 。 


在 网 页 中 插入 图 像 


在 使 用 图 像 前 ， 一 定 要 有 目的 地 选择 图 像 ， 最 好 运用 图 像 处 理 软件 美化 一 下 图 像 ， 和 否则 揪 
入 的 图 像 可 能 不 美观 ， 会 显得 非常 死板 。 


6.2.1 插入 图 像 

图 像 是 网 页 构成 中 最 重要 的 元 素 之 一 ， 美 观 的 图 像 会 为 网 站 增添 生命 力 ， 同 时 也 加 深入 们 
对 网 站 风格 的 印象 。 下 面 通过 如 图 6-1 所 示 的 实例 讲述 如 何在 网 页 中 插入 图 像 ， 具 体操 作 步 又 
如 下 : 


加 打开 网 页 文档 ， 将 光标 置 于 插入 图 像 的 位 
置 ， 如 图 6-2 所 示 。 


图 6-2 打开 网 页 文档 


本 执行 “插入 ” | “图 像 ” | “图 像 ” 命令 ， 
图 6-1 插入 网 页 图 像 的 效果 如 图 6-3 所 示 。 


59 


al 


图 6-3 执行 “图 像 ”命令 


本 弹出 “选择 图 像 源 文件 ”对 话 框 ， 在 对 话 
框 中 选择 图 像 images/03.jpg， 如 图 6-4 所 示 。 


图 6-5 插入 图 像 


友 提示 女 

如 果 选 中 的 文件 不 在 本 地 网 站 的 根 目录 
下 ， 则 弹出 如 下 图 所 示 的 选择 框 ， 系 统 要 求 
用 户 复制 图 像 文件 到 本 地 网 站 的 根 目录 ， 单 
击 “ 是 ”按钮 ， 此 时 会 弹出 “复制 文件 为 ” 
对 话 框 ， 让 用 户 选择 文件 的 存放 位 置 ， 可 选 
择 根 目录 或 根 目录 下 的 任何 文件 夹 ， 这 里 建 
议 读者 新 建 一 个 名 称 为 images 的 文件 夹 ， 
今后 可 以 把 网 站 中 的 所 有 图 像 都 放 入 到 该 文 
件 夹 中 。 


i | ri 
a ee ps le | 
-| 
| Re Ne jog dbujpe aejpe | 
a | 国 四 
were se l 
EE oajpg 四 TPR 
到 Sa ee) ee) 
图 6-4 “选择 图 像 源 文件 ”对 话 框 
妈 高 手 支 招 女 
使 用 以 下 方法 也 可 以 插入 图 像 : 


。 执行 “窗口 "| “资源 ”命令 , 打开 “ 资 
源 ”面板 ， 在 面板 中 单 击 国 按钮 ， 
展开 图 像 文 件 夹 ， 选 定 图 像 文件 ， 
然后 用 鼠标 拖 动 到 网 页 中 的 合适 位 
置 即 可 。 

。 单 击 “ 常 用 ”插入 栏 中 的 四 -按钮 ， 
弹出 “选择 图 像 源 文件 ”对 话 框 ， 
在 对 话 框 中 选择 需要 的 图 像 文件 。 


柄 单 击 “ 确 定 ” 按 钮 , 插入 图 像 , 如 图 6-5 所 示 。 
保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 
参见 图 6-1 所 示 。 
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6.2.2 


文件 位 于 外 点 实例 素材 的 根 文件 夹 以 外 
当 人 发 布 站 点 时 可 能 不 能 访问 . 


您 的 要 文件 夹 是 : 
DA 网 页 制作 与 网 站 建设 充 全 实战 手 岑 \ 实 便 素材 \ 


您 愿 辣 梅 该 文 件 复制 到 根 文件 夫 中 坦 ? 


设置 图 像 属 性 
下 面 通过 实例 讲述 图 像 属性 的 设置 ， 如 


图 6-6 所 示 ， 具 体操 作 步 骤 如 下 : 


原始 文件 : | 原始 文件 /CH06/6.2.2/index.html 


最 终 文件 /CH06/6.2.2/index1.html 


最 终 文件 : 


夯 打开 网 页 文档 ， 选 中 插入 的 图 像 ， 如 图 6-7 
所 示 。 


图 6-6 设置 图 像 属性 后 的 效果 


友 指点 迷津 太 

如 何 加 快 页 面 图 片 的 下 载 速度 ? 

在 浏览 网 页 的 过 程 中 ， 有 时 首页 图 片 过 少 ， 而 其 他 页 面 图 片 过 多 ， 为 了 提高 效率 ， 当 
访问 者 浏览 首页 时 ， 后 台 进 行 其 他 页 面 的 图 片 下 载 。 方 法 是 在 首页 加 入 <img src=”1jpg” 
width=0 height=0>， 其 中 width、height 要 设置 为 0，1.jpg 为 提前 下 载 的 图 片 名 。 


图 6-7 打开 网 页 文档 


02 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 | 可 以 在 “属性 ”面板 中 设置 图 像 的 其 他 属性 ， 
“对 齐 ”|“ 右 对 齐 ” 命 令 ， 如 图 6-8 所 示 。 如 图 6-9 所 示 。 


52 要 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
F 果 如 图 6-6 所 示 。 


[DW 2 en 0 et we a 5 eR WOW we 


图 6-8 执行 “ 右 对 齐 ”命令 
王选 中 插入 的 图 像 ， 打开 “属性 ”面板 ， 还 


图 6-9 设置 图 像 的 对 齐 方式 


友 知识 要 点 女 

在 图 像 的 “属性 ”面板 中 可 以 进行 如 下 设置 : 

。 宽 和 高 ， 以 像素 为 单位 设 定 图 像 的 宽度 和 高 度 。 当 在 网 页 中 插入 图 像 时 ， 
Dreamweaver 自动 使 用 图 像 的 原始 尺寸 。 可 以 使 用 以 下 单位 指定 图 像 大 小 : 点 、 英 寸 、 
毫米 和 厘米 。 在 HTML 源 代码 中 ，Dreamweaver 将 这 些 值 转换 为 以 像素 为 单位 。 
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0.3 


src: 指定 图 像 的 具体 路 径 。 

链接 : 为 图 像 设 置 超级 链接 。 可 以 单 击 员 按钮 浏览 选择 要 链接 的 文件 ， 或 直接 输入 

URL 路 径 。 

目标 : 链接 时 的 目标 窗口 或 框架 。 在 其 下 拉 列 表 中 包括 4 个 选项 。 

> _blank: 将 链接 对 象 在 一 个 未 命名 的 新 浏览 器 窗口 中 打开 。 

> _parent: 将 链接 的 对 象 在 含有 该 链接 框架 的 父 框架 集 或 父 窗口 中 打开 。 

> _self: 将 链接 的 对 象 在 该 链接 所 在 的 同一 框架 或 窗口 中 打开 。_self 是 默认 选项 ， 
通常 不 需要 指定 它 。 

> _top: 将 链接 的 对 象 在 整个 浏览 器 窗口 中 打开 ， 因 而 会 替代 所 有 框架 。 

替换 : 图 片 的 注释 。 当 浏览 器 不 能 正常 显示 图 像 时 ， 便 在 图 像 的 位 置 用 这 个 注释 代 

替 图 像 。 

编辑 ， 启 动 “外 部 编辑 器 ”首选 参数 中 指定 的 图 像 编辑 器 ， 并 使 用 该 图 像 编辑 器 打 

开 选 定 的 图 像 。 

> 编辑 : 启动 外 部 图 像 编辑 器 编辑 选中 的 图 像 。 

> 编辑 图 像 设 置 吕 :弹出 “图 像 预览 ”对 话 框 ， 在 对 话 框 中 可 以 对 图 像 进行 设置 。 

> 重新 取样 号 : 将 “ 宽 ” 和 “高 ”的 值 重 新 设置 为 图 像 的 原始 大 小 。 调 整 所 选 图 像 
大 小 后 , 此 按钮 显示 在 “ 宽 ” 和 “高 ”文本 框 的 右 侧 。 如 果 没 有 调整 过 图 像 的 大 小 ， 
该 按钮 不 会 显示 出 来 。 

> 裁剪 甘 : 修剪 图 像 的 大 小 ， 从 所 选 图 像 中 删除 不 需要 的 区 域 。 

> 亮度 和 对 比 度 Ql:， 调整 图 像 的 亮度 和 对 比 度 。 

> 锐 化 4j: 调整 图 像 的 清晰 度 。 

地 图 : 在 设置 图 像 热 点 链接 时 使 用 。 

原始 ;指定 在 载 入 主 图 像 之 前 应 该 载 入 的 图 像 。 


在 网 页 中 简单 地 编辑 图 像 


Dreamweaver CC 提供 了 基本 的 图 像 编辑 功能 ， 无 须 使 用 外 部 图 像 编 辑 应 用 程序 ， 即 可 修 


改 图 像 。 
如 大 小 、 


63.1 


使 用 Dreamweaver CC 内 置 的 基本 图 像 编 
辑 功能 可 以 裁 前 图像， 删除 图 像 中 不 需要 的 


部 分 。 


01 打开 网 页 文档 ， 选 中 要 裁剪 的 图 像 ， 打 开 


“属性 ” 


按钮 过 ， 
虽 弹出 Dreamweaver 提示 对 话 框 ， 如 图 6-11 


所 示 。 
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插入 图 像 后 ， 如 果 图 像 的 大 小 和 位 置 并 不 合适 ， 还 需要 对 图 像 的 属性 进行 具体 的 调整 ， 
位 置 和 对 齐 方式 等 。 


裁剪 图 像 


而 板 ， 在 “属性 ”面板 中 单 击 “ 裁 剪 ” 


如 图 6-10 所 示 。 


图 6-10 单 击 “裁剪 ”按钮 于 


图 6-11 提示 框 

交 高 手 支 招 女 

使 用 Dreamweaver CC 裁 前 图 像 时 ， 会 
更 改 磁 盘 上 的 源 图 像 文件 ， 因 此 ， 需 要 事先 
备份 图 像 文 件 ， 以 备 在 需要 恢复 到 原始 图 像 
时 使 用 。 


三 单 击 “ 确 定 ”按钮 ， 此 时 ， 图 像 的 周围 会 
出 现 裁剪 控制 点 ， 如 图 6-12 所 示 。 


A A Map 


[EC 


bo 网 


图 6-12 出 现 裁剪 控制 点 


苔 调整 裁剪 控制 点 至 合适 位 置 ， 在 边界 框 内 
部 双击 或 按 Enter 键 裁 前 所 选区 域 。 如 图 6-13 
所 示 。 


图 6-13 裁剪 图 像 


第 6 章 利用 图 像 和 多 媒体 美化 网 页 


六 提示 六 
执行 “修改 ”| “图像 ” |“ 裁剪 ”命令 ， 
也 可 裁剪 图 像 。 


6.3.2 ”调整 图 像 亮 度 和 对 比 度 


用 户 可 以 直接 在 Dreamweaver CC 中 调整 
图 像 的 亮度 和 对 比 度 ， 对 图 像 的 高 亮 显示 、 
阴影 和 中 间 色 调 进行 简单 的 调整 。 
丽 打开 网 页 文档 ， 选 中 要 调整 亮度 /对 比 度 
的 图 像 。 在 “属性 ”面板 中 单 击 “ 亮 度 / 对 比 
度 ” 按 钮 本， 如 图 6-14 所 示 。 


0 0 9 EIN We 


PE RE 
om/e ss 0 


i 
[EC ao 


图 6-14 单 击 “亮度 / 对比度” 按钮 
“亮度 /对 比 度 ” 对 话 框 ， 如 图 6-15 


本 弹 
所 示 。 


图 6-15 


三 在 对 话 框 中 拖 动 亮度 和 对 比 度 滑 块 〈 向 左 
为 降低 , 向 右 为 增加 , 取 值 范围 为 -100 一 100)， 
选中 “预览 ” 复 选 框 , 可 以 在 调整 图 像 的 同时 ， 
预览 到 对 该 图 像 所 做 的 修改 。 

广 提示 妇 

执行 “修改 ”| “图像 ”| “亮度 /对 比 度 ” 
命令 ,也 可 用 弹出 “亮度 /对 比 度 ” 对 话 框 。 


现 单 击 “ 确 定 ” 按 钮 ， 即 完成 了 调整 图 像 亮 


“亮度 / 对比度” 对话 杠 


， 度 和 对 比 度 的 操作 。 如 图 6-16 所 示 。 
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图 6-16 调整 亮度 和 对 比 度 的 效果 


6.3.3 ” 锐 化 图 像 

锐 化 图 像 可 以 通过 增加 图 像 中 边缘 的 对 比 
度 来 调整 图 像 的 焦点 。 扫 描 图 像 或 拍摄 数码 照 
片 时 ， 大 多 数 图 像 捕获 软件 的 默认 操作 是 柔 化 
图 像 中 各 对 象 的 边缘 ， 这 可 以 防止 特别 精致 的 
细节 从 组 成 数码 图 像 的 像素 中 丢失 。 不 过 ， 要 
显示 数码 图 像 文 件 中 的 细节 ， 经 常 需要 锐 化 图 
像 ， 从 而 提高 边缘 的 对 比 度 ， 使 图 像 更 清晰 。 
画 打 开 网 页 文档 , 选中 要 锐 化 的 图 像 。 在 “ 属 
性 ”面板 中 单 击 “ 锐 化 ”按钮 下 ， 如 图 6-17 
所 示 。 
区 弹 出 “ 锐 化 ”对 话 框 ， 在 对 话 框 中 进行 相 
应 的 设置 ， 在 对 话 框 中 拖 动 “ 锐 化 ” 滑 块 ， 
调 至 合适 的 位 置 ， 如 图 6-18 所 示 。 

女 提示 女 

执行 “修改 ” |“ 图像 ”|“ 锐 化 ”命令 ， 
也 可 用 弹出 “ 锐 化 ”对 话 框 。 


插入 鼠标 经 过 图 像 


图 6-18 “ 锐 化 ”对 话 框 


到 单 击 “ 确 定 ” 按 钮 , 即 完成 锐 化 图 像 的 操作 ， 
如 图 6-19 所 示 。 


图 6-19 锐 化 图 像 


在 浏览 器 中 查看 网 页 时 ， 当 鼠标 指针 经 过 图 像 时 ， 该 图 像 就 会 变 成 另外 一 幅 图 像 ， 当 鼠标 
移 开 时 ， 该 图 像 就 又 变 回 原来 的 图 像 。 这 种 效果 在 Dreamweaver 中 可 以 非常 方便 地 做 出 来 。 
鼠标 未 经 过 图 像 时 的 效果 如 图 6-20 所 示 ， 当 鼠标 经 过 图 像 时 的 效果 如 图 6-21 所 示 ， 具 体 


操作 步骤 如 下 : 
原始 文件 : 


原始 文件 /CH06/6.4/index.html 


最 终 文件 : 


最 终 文件 /CH06/6.4/index1.html 
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玛 执 行 “插入 ”|“ 图 像 ”|“ 鼠 标 经 过 图 像 ” 
命令 ， 弹 出 “插入 鼠标 经 过 图 像 ”对 话 框 ， 
如 图 6-23 所 示 。 


图 6-23 “插入 鼠标 经 过 图 像 ” 对 话 杠 


友 知识 要 点 让 
“插入 鼠标 经 过 图 像 ” 对 话 框 中 可 以 进 
行 如 下 设置 : 
。 图 像 名 称 : 可 以 设置 这 个 滚动 图 像 
的 名 称 。 
。 原始 图 像 : 设置 滚动 图 像 的 原始 图 
像 ， 在 其 后 的 文本 框 中 输入 此 原始 
图 像 的 路 径 ， 或 单 击 “ 浏 览 ”按钮 ， 
打开 “原始 图 像 ” 对 话 框 ， 在 “ 原 
始 图 像 ” 对 话 框 中 可 选择 图 像 。 
。 鼠标 经 过 图 像 : 用 来 设置 鼠标 经 过 
图 像 时 ， 原 始 图 像 替 换 成 的 图 像 。 
。 ” 预 载 鼠标 经 过 图 像 : 选中 该 复 选 框 ， 
打开 网 页 时 就 预 下 载 替 换 图 像 到 本 
地 。 当 鼠标 经 过 图 像 时 ， 能 迅速 地 
a 切换 到 替换 图 像 ， 如 果 取 消 选中 该 
图 6-21 和 鼠标 经 过 图 像 时 的 效果 复 选 框 ， 当 鼠标 经 过 该 图 像 时 才 下 
三 打开 网 页 文档 ， 将 光标 置 于 插入 鼠标 经 过 载 蔡 换 图 像 ， 替 换 可 能 会 出 现 不 连 
图 像 的 位 置 ， 如 图 6-22 所 示 。 贯 的 现象 。 
。 蔡 换文 本 : 用 来 设置 图 像 的 替换 文 
本 ， 当 图 像 不 显示 时 ， 显 示 这 个 替 
换文 本 。 
。 按 下 时 ， 前 往 的 URL: 用 来 设置 滚 
动 图 像 上 应 用 的 超 链 接 。 


三 单 击 * 原 始 图 像 ” 文 本 框 右边 的 “浏览 ”按钮 ， 
弹出 “原始 图 像 : ”对 话 框 ， 在 对 话 框 中 选 
择 相应 的 图 像 images/03.jpg,， 如 图 6-24 所 示 ， 
单 击 “ 确 定 ” 按 钮 。 


图 6-22 打开 网 页 文档 
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图 6-24 “原始 图 像 : ”对 话 框 


三 单 击 “ 鼠 标 经 过 图 像 ”文本 框 右边 的 “ 浏 
览 ” 按 钮 ， 弹 出 “鼠标 经 过 图 像 ， ”对 话 框 ， 

在 对 话 框 中 选择 相应 的 图 像 images/01.jpg， 如 
6-25 所 示 。 


图 6-25 “ 饼 标 经 过 图 像 : ”对 话 框 


西单 击 “ 确 定 ” 按 钮 ， 如 图 6-26 所 示 。 


碌 相 权 因 蜡 。3naees/01, je 
了 各 ti 本 包 


浊 吕 


欠 相 六 本 


失 下 时， 前 作 的 URL 3 


图 6-26 添加 到 对 话 框 


西单 击 “ 确 定 ” 按 钮 , 即 可 插入 鼠标 经 过 图 像 ， 
如 图 6-27 所 示 。 


插入 Flash 动画 


图 6-27 插入 鼠标 经 过 图 像 
砚 选中 插入 的 图 像 ， 单 击 鼠 标 右键 ， 在 弹出 
的 快捷 菜单 中 选择 “对 齐 ”|“ 右 对 齐 ” 命 令 ， 
如 图 6-28 所 示 。 


图 6-28 设置 图 像 对 齐 方 式 


酌 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 鼠 
标 未 经 过 图 像 时 的 效果 参见 图 6-20 所 示 ， 鼠 
标 经 过 图 像 时 的 效果 参见 图 6-21 所 示 。 

交 提 示 友 

在 插入 鼠标 经 过 图 像 时 ， 如 果 不 为 该 图 
像 设置 链接 ，Dreamweaver 将 在 HTML 源 代 
码 中 插入 一 个 空 链接 #， 该 链接 上 将 附加 鼠 
标 经 过 的 图 像 行为 ， 如 果 将 该 链接 删除 ， 鼠 
标 经 过 图 像 将 不 起 作用 。 


在 网 页 中 插入 Flash 动画 可 以 增加 网 页 的 动感 ， 使 网 页 更 具 吸 引力 ， 因 此 多 媒体 元 素 在 网 
页 中 的 应 用 越 来 越 广泛 。 下 面 以 如 图 6-29 所 示 的 效果 为 例 讲述 如 何在 网 页 中 插入 Flash 影片 ， 


有 具体 操作 步骤 如 下 : 
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图 6-31 “选择 SWF” 对 话 框 


Ee 妆 提示 友 
插入 Flash 动画 还 有 两 种 方法 : 
图 6-29 插入 Flash 动画 的 效果 。 单 击 “ 媒 体 ”插入 栏 中 的 Flash 按 
钮 外 ， 弹 出 “选择 SWF” 对 话 框 ， 
也 可 以 插入 Flash 影片 。 
。 拖 动 “常用 ”插入 栏 中 的 按钮 外 至 
画 打 开 原 始 网 页 文档 ， 将 光标 置 于 要 插入 所 需要 的 位 置 ， 弹 出 “选择 SWF” 
Flash 动画 的 位 置 ， 如 图 6-30 所 示 。 对 话 框 ， 也 可 以 插入 Flash 影片 。 


丁 在 对 话 框 中 选择 top.swf, 单 击 “ 确 定 ” 按 钮 ， 
即 可 插入 Flash 动画 ， 如 图 6-32 所 示 。 


[EEC CT CC 古 - 加 OUTISLz| 


ES i 
百合 种 植 基地 @ oS | 


图 6-30 打开 网 页 文档 


本 执行 “插入 ” | “媒体 ” | “Flash SWFE?” 命令 ， | i 
弹出 “选择 SWF” 对 话 框 ， 在 对 话 框 中 选择 图 6-32 插入 Flash 动画 
相应 的 Flash 文件 ， 如 图 6-31 所 示 。 | 

友 知识 要 点 女 


插入 的 Flash 的 “属性 ”面板 的 各 项 参数 含义 如 下 : 

。 Flash 文本 框 : 输入 Flash 动画 的 名 称 。 

。 宽 、 高 : 设置 文档 中 Flash 动画 的 尺寸 ， 可 以 输入 数值 改变 其 大 小 ， 也 可 以 在 文档 中 
拖 动 缩放 控制 点 来 改变 其 大 小 。 

。 文件， 指定 Flash 文件 的 路 径 。 

。 ” 源 文件 ， 指定 Flash 源 文档 fla 的 路 径 。 


67 


。 ”背景 颜色 : 指定 影片 区 域 的 背景 颜色 。 在 不 播放 影片 时 〈 在 加 载 时 和 在 播放 后 ) 也 显 
示 此 颜色 。 
。 编辑 加 RS@ ]: 启动 Flash 以 更 新 FLA 文件 (使 用 Flash 创作 工具 创建 的 文件 ) 。 如 
果 计 算 机 上 没有 安装 Flash， 则 会 禁用 此 选项 。 
类 : 可 用 于 对 影片 应 用 CSS 类 。 
循环 ， 选中 此 复 选 框 可 以 重复 播放 Flash 动画 。 
自动 播放 : 选中 此 复 选 框 ， 当 在 浏览 器 中 载 入 网 页 文档 时 ， 自 动 播放 Flash 动画 。 
垂直 边 距 和 水 平 边 距 : 指定 动画 边框 与 网 页 上 边界 和 左边 界 的 距离 。 
品质 : 设置 Flash 动画 在 浏览 器 中 的 播放 质量 , 包括 “ 低 品 质 ”、“ 自 动 低 品 质 ”、“ 自 
动 高 品质 ”和 “高 品质 ”4 个 选项 。 
。 ”比例 : 设置 显示 比例 ， 包 括 “ 全 部 显示 ”、“ 无 边框 ”和 “严格 匹配 ”3 个 选项 。 
。 对 齐 : 设置 Flash 在 页 面 中 的 对 齐 方式 。 
。 Wmode: 默认 值 是 不 透明 ， 这 样 在 浏览 器 中 ，DHTML 元 素 就 可 以 显示 在 SWF 文件 
的 上 面 。 如 果 SWF 文件 包括 透明 度 ， 并 且 希 望 DHTML 元 素 显示 在 它们 的 后 面 ， 选 
择 “ 透 明 ” 选 项 。 
。 播放 : 在 “文档 ”窗口 中 播放 影片 。 
。 参数 :打开 一 个 对 话 框 ， 可 在 其 中 输入 传递 给 影片 的 附加 参数 。 影 片 必须 已 设计 好 ， 
可 以 接收 这 些 附 加 参数 。 
吗 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 参 见 图 6-29 所 示 。 


插入 声音 


多 媒体 技术 的 发 展 使 网 页 设计 者 能 够 轻松 地 在 页 面 中 加 入 声音 、 动 画 、 影 片 等 内 容 ， 给 访 
问 者 增添 了 几 分 欣喜 ， 多 媒体 对 象 在 网 页 上 一 直 是 一 道 亮 丽 的 风景 ， 正 是 因为 有 了 多 媒体 ， 网 
页 才 丰 富 起 来 。 


6.6.1 ”音频 文件 格式 


在 计算 机 内 播放 或 是 处 理 音频 文件 ， 也 就 是 对 声音 文件 进行 数 、 模 转换 ， 这 个 过 程 同 
样 由 采样 和 量化 构成 。 人 耳 所 能 听 到 的 声音 ， 从 最 低频 率 20Hz 一 直到 最 高 频率 20kHz， 
20kHz 以 上 人 耳 是 听 不 到 的 ， 因 此 音频 文件 格式 的 最 大 带宽 是 20kHz， 故 而 采样 速率 需要 介 
于 40kHz~50kHz， 而 且 对 每 个 样本 需要 更 多 的 量化 比特 数 。 音 频数 字 化 的 标准 是 每 个 样本 16 
位 -96dB 的 信 噪 比 ， 采 用 线性 脉冲 编码 调制 PCM， 每 一 量化 步 长 都 具有 相等 的 长 度 。 在 音频 
文件 的 制作 中 ， 正 是 采用 这 一 标准 。 

音频 格式 日 新 月 异 ， 常 见 的 音频 格式 包括 : CD 格式 、WAVE (*.wav) 、AIFF、AU、 
MP3、 MIDI、 WMA、 RealAudio、 VQF、OggVorbis、AAC、APE。 


6.6.2 ”添加 背景 音乐 
通过 代码 提示 ， 可 以 在 “代码 ”视图 中 插入 代码 。 在 输入 某 些 字符 时 ， 将 显示 一 个 列表 ， 


列 出 完成 条 目 所 需要 的 选项 。 下 面 讲 解 通过 代码 提示 插入 背景 音乐 的 方法 , 效果 如 图 6-33 所 示 ， 
有 具体 操作 步骤 如 下 : 
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第 6 章 利用 图 像 和 多 媒体 美化 网 页 


最 终 文件 : | 最 终 文 件 /CH06/6.6.2/index1.html 


图 6-33 插入 背景 音乐 效果 


太 提 示 友 

浏览 器 可 能 需要 某 种 附加 的 音频 支持 来 
播放 声音 ， 因 此 ， 具 有 不 同 插件 的 不 同 浏览 
器 所 播放 声音 的 效果 通常 会 有 所 不 同 。 


原始 文件 : er | 


| 
图 6-35 选中 标签 bgsound 


次 指点 迷津 太 

Bgsound 标 签 共 有 5 个 属性 ， 其 中 
balance 用 于 设置 音乐 的 左右 均衡 ，delay 用 
于 设置 进行 播放 过 程 中 的 延 时 ，loop 用 于 控 
制 循环 次 数 ，src 用 于 存放 音乐 文件 的 路 径 ， 
volume 用 于 调节 音量 。 


到 双击 即 可 插入 该 标签 ， 如 果 该 标签 支持 属 
性 ， 则 按 空格 键 以 显示 该 标签 多 许 的 属性 列 
表 ， 从 中 选择 属性 src， 如 图 6-36 所 示 。 这 个 
属性 用 来 设置 背景 音乐 文件 的 路 径 。 


打开 网 页 文档 ， 如 图 6-34 所 示 。 


WW 0) so CE 醒 - 


图 6-34 打开 网 页 文档 


区 切换 到 “代码 ”视图 ， 在 “代码 ”视图 中 


找到 标签 <body>， 并 在 其 后 面 输入 “<” 以， 


显示 标签 列表 ， 输 入 “<” 时 会 自动 弹出 一 个 


列表 框 , 向 下 滚动 选中 标签 bgsound, 如 图 6-35 ， 


所 示 。 


图 6-36 选择 属性 src 


页 按 Enter 键 后 ， 出 现 “ 浏 览 ” 字 样 ， 单 击 
可 弹出 “选择 文件 ”对 话 框 ， 在 对 话 框 中 选 
择 音乐 文件 ， 如 图 6-37 所 示 。 
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六 指点 迷津 女 

背景 音乐 文件 不 要 太 大 ， 和 否则 很 可 能 整 
个 网 页 都 浏览 完了 ， 声 音 却 还 没有 下 载 完 。 
在 背景 音乐 格式 方面 ，MID 格式 是 最 好 的 选 
择 ， 它 不 仅 拥有 不 错 的 音质 ， 最 关键 的 是 它 
的 容量 非常 小 ， 一 般 只 有 几 十 字 节 。 


西 选 择 音乐 文件 后 ， 单 击 “ 确 定 ” 按 钮 。 在 
新 插入 的 代码 后 按 空 格 键 ， 在 属性 列表 中 选 
择 属性 loop， 如 图 6-38 所 示 。 

丁 出 现 “-1” 并 选中 。 在 最 后 的 属性 值 后 ， 


为 该 标签 输入 “>”， 如 图 6-39 所 示 。 9 
三 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 6-33 所 示 。 
6.7 插入 视频 
随 着 宽带 技术 的 发 展 和 推广 ， 出 现 了 许多 视频 网 站 。 越 来 越 多 的 人 选择 观看 在 线 视 频 ， 同 
时 也 有 很 多 的 网 站 提供 在 线 视频 服务 。 


6.7.1 ”视频 文件 的 格式 


视频 文件 的 格式 非常 多 ， 常 见 的 有 MPEG、AVI、WMV、RM 和 MOYV 等 。 

。 MPEG (或 MPG) 是 一 种 压缩 比率 较 大 的 活动 图 像 和 声音 的 视频 压缩 标准 ， 常 见 的 
VCD、SVCD、DVD 就 是 这 种 格式 。MPEG 文件 格式 是 运动 图 像 压 缩 算法 的 国际 标准 ， 
它 采用 了 有 损 压 缩 方法 减少 运动 图 像 中 的 见 余 信息 ， 把 后 续 图 像 中 和 前 面 图 像 中 见 余 
的 部 分 去 除 ， 从 而 达到 压缩 的 目的 。 

。 AVI 是 一 种 Microsoft Windows 操作 系统 使 用 的 多 媒体 文件 格式 ， 可 以 将 视频 和 音频 
交织 在 一 起 , 进行 同步 播放 。 这 种 视频 格式 的 优点 是 图 像 质量 好 , 可 以 跨 多 个 平台 使 用 ， 
其 缺点 是 体积 过 于 庞大 。 

。 WMYV 是 一 种 Windows 操作 系统 自 带 的 媒体 播放 器 Windows Media Player 所 使 用 的 多 
媒体 格式 。 它 的 英文 全 称 为 Windows Media Video， 是 微软 推出 的 一 种 采用 独立 编码 
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方式 并 且 可 以 直接 在 网 上 实时 观看 视 区 


频 节目 的 文件 压缩 格式 。WMV 格式 ， 
的 主要 优点 包括 本 地 或 网 络 回放 、 可 
扩充 的 媒体 类 型 、 部 件 下 载 、 可 伸缩 ， 
的 媒体 类 型 、 流 的 优先 级 化 、 多 语言 
支持 及 环境 独立 性 。 

。 RM 是 Real 公司 推广 的 一 种 多 媒体 
文件 格式 ， 具 有 非常 好 的 压缩 比率 ， 


是 网 上 应 用 最 广泛 的 格式 之 一 。 可 以 守 二 


使 用 RealPlayer 对 符合 Real Media 技 
术 规 范 的 网 络 音频 /视频 资源 进行 实 
况 转播 ， 并 且 Real Media 可 以 根据 
不 同 的 网 络 传输 速率 制定 出 不 同 的 压 
缩 比率 ， 从 而 实现 在 低速 率 的 网 络 上 
进行 影像 数据 的 实时 传送 和 播放 。 

。 MOV 是 Apple 公司 推广 的 一 种 多 媒 
体 文件 格式 。 


6.7.2 ”在 网 页 中 插入 视频 文件 


下 面 以 如 图 6-40 所 示 的 效果 为 例 讲述 如 何 
在 网 页 中 插入 Flash 视频 ， 有 具体 操作 步骤 如 下 : 


原始 文件 ， | 原始 文件 /CH06/6.7.2/index.html 


ye 


图 6-40 插入 Flash 视频 的 效果 


打开 网 页 文档 ， 将 光标 置 于 要 插入 视频 的 


位 置 ， 如 图 6-41 所 示 。 


第 6 章 利用 图 像 和 多 媒体 美化 网 页 


图 6-41 打开 网 页 文档 


五 执行 “插入 ”| 媒体 "|“Flash Video ”命令 ， 
弹出 “插入 FLV” 对 话 框 ， 在 对 话 框 中 单 击 
URL 后 面 的 “浏览 ”按钮 ， 如 图 6-42 所 示 。 


一 


图 6-42 


三 在 弹出 的 “选择 FLV” 对 话 框 中 选择 视频 
文件 shipinHv， 如 图 6-43 所 示 。 


“插入 FLV” 对 话 框 


图 6-43 


“选择 FLV” 对 话 框 


醋 单 击 “ 确 定 ”按钮 ， 返 回 到 “插入 FLV” 


， 对话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 


”6-44 所 示 。 
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大兴 家 过 忒 下载 堪 


URL shipin a 
《 箱 和 FLV 文 的 | 或 汪 聊 征 ) 


| 图 6-45 插入 视频 


ee 西 保 存 文档 ， 按 12 键 在 浏览 器 中 预览 效果 ， 
西单 击 “ 确 定 ， 按 钮 , 即 可 插入 视频 , 如 图 6.45 参见 图 6-40 所 示 。 


综合 实战 


可 以 使 用 Dreamweaver 中 的 可 视 化 工具 向 页 面 添加 各 种 内 容 ， 包 括 文 本 、 图 像 、 影 片 、 声 
音 和 其 他 媒体 形式 等 。 在 本 章 中 学 习 了 图 像 和 多 媒体 的 添加 ， 本 节 将 通过 实例 来 讲述 具体 的 应 
用 。 


综合 实战 ] 一 一 创建 图 文 混 排 网 页 EECTZTFETT | 
文字 和 图 像 是 网 页 中 最 基本 的 元 素 ， 在 

网 页 中 插入 图 像 会 使 网 页 更 加 生动 形象 。 在 辟 足 品质 侯 足 昭 务 满足 高 示 

网 页 中 创建 图 文 混 排 网 页 的 方法 非常 简单， 

如 图 6-46 所 示 的 是 图 文 混 排 的 效果 ， 具 体操 

作 步 又 如 下 ; 


原始 文件 : | 原始 文件 /CH06/ 实战 index.html 


最 终 文件 ， | 最终 文件 /CH06/ 实战 Mindexl.html 


太 指点 迷津 妇 
如 何 使 文字 和 图 片 内 容 共处 ? 
在 Dreamweaver 中 ， 图 片 对 象 是 需要 独 
占 一 行 的 ， 那 么 文字 内 容 只 能 在 与 其 平行 的 
一 行 的 位 置 上 ， 怎 么 样 才 可 以 让 文字 围绕 着 
图 片 显示 呢 ? 需要 选中 图 片 , 单 击 鼠 标 右键 ， 
在 弹出 的 快捷 菜单 中 选择 “对 齐 ”| “ 右 对 齐 ” 站 
命令 ， 这 时 会 发 现 文字 已 均匀 地 排列 在 图 片 ” 丽 打开 网 页 文档 ， 如 图 6-47 所 示 。 
的 右边 了 。 醒 将 光标 置 于 页 面 中 ， 输 入 相应 的 文字 ， 如 
图 6-48 所 示 。 
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第 6 章 利用 图 像 和 多 媒体 美化 网 页 


图 6-48 输入 文字 


本 将 光标 置 于 文字 中 ,执行 “插入 ¥ 图 像 六 图 
像 ” 命令 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 ， 
在 对 话 框 中 选择 图 像 images/tu.jpg， 如 图 6-49 
ne 


图 6-49 


< 选择 图 像 源 文 件 " 对 话 杠 


图 6-50 插入 图 像 


西 选 中 插入 的 图 像 ， 单 击 鼠 标 右键 ， 在 弹出 
的 快捷 菜单 中 选择 “对 齐 ” |“ 右 对 齐 ” 命 令 ， 
如 图 6-51 所 示 。 

醒 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 6-46 所 示 。 


图 6-51 设置 图 像 的 对 齐 方式 


友 高 手 支 招 女 

修改 图 像 的 高 度 和 宽度 可 以 改变 图 像 的 
显示 尺寸 ， 但 是 这 并 不 能 改变 图 像 下 载 所 用 
的 时 间 ， 因 为 浏览 器 是 先 下 载 图 像 数据 ， 然 
后 才 改 变 图 像 尺寸 的 。 要 想 减少 图 像 下 载 所 
需要 时 间 并 使 图 像 无 论 什 么 时 候 都 显示 相同 
的 尺寸 ， 建 议 在 图 像 编 辑 软件 中 ， 重 新 处 理 


该 图 像 ， 这 样 得 到 的 效果 将 是 最 好 的 。 


| 一 一 网 页 
国 间 而 “确定 * 技 伺 插入 图 像 ， 如 国 650 | 下 本 5 一- 坷 页 玉生 


下 面 通 过 实例 讲述 在 网 页 中 插入 背景 音 
乐 和 Flash 动画 的 步骤 ， 效 果 如 图 6-52 所 示 ， 


， 具 体操 作 步 骤 如 下 : 


73 


图 6-52 在 网 页 中 插入 多 媒体 文件 的 效果 


原始 文件 ，| 原始 文件 /CH06/ 实战 /index.html 
最 终 文 件 ，| 最 终 文件 /CH06/ 实战 indexl.html 


画 打 开 网 页 文档 ， 将 光标 置 于 要 插入 Flash 
动画 的 位 置 ， 如 图 6-53 所 示 。 


图 6-53 打开 网 页 文档 


本 章 小 结 


醒 执 行 “插入 ” | “媒体 ” | “Flash SWFy” 命令 ， 
弹出 “选择 SWF” 对 话 框 ， 在 对 话 框 中 选择 


文件 top.swf， 如 图 6-54 所 示 。 
”西单 击 “ 确 定 ” 按 钮 ,插入 SWF 动 画 , 如 图 6-55 


所 示 。 
葡 保存 文 档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 6-52 所 示 。 


图 6-54 


“选择 SWF” 对 话 框 


图 6-55 插入 动画 


网 页 美化 最 简单 最 直接 的 方法 就 是 在 网 页 上 添加 图 像 和 媒体 ， 图 像 和 媒体 不 但 使 网 页 更 加 
美观 、 形 象 和 生动 ， 而 且 使 网 页 中 的 内 容 更 加 丰富 多 彩 。 利 用 图 像 和 媒体 创建 精美 网 页 ， 能 够 
给 网 页 增加 生机 ， 从 而 吸引 更 多 的 浏览 者 。 因 此 图 像 和 媒体 在 网 页 中 的 作用 是 非常 重要 的 ， 作 


为 一 名 网 页 设计 者 必须 掌握 网 页 图 像 的 运用 。 
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第 / 章 创建 网 页 超 链接 


超 链接 是 构成 网 站 最 为 重要 的 部 分 之 一 ， 单 击 网 页 中 的 超 链接 ， 即 可 跳 转 到 相应 的 网 页 ， 


因此 可 以 非常 方便 地 从 一 个 网 页 到 达 另 一 个 网 页 。 在 网 页 上 创建 超 链接 ， 就 可 以 把 Intemet 上 
众多 的 网 站 和 网 页 联系 起 来 ， 构 成 一 个 有 机 的 整体 。 本 章 主要 讲述 超 链 接 的 基本 概念 和 各 种 类 
型 超级 链接 的 创建 。 


令 ”掌握 超 链 接 的 概念 全 ”创建 各 种 超 链 接 
令 管理 网 页 超 链 接 


超 链接 基础 知识 


超 链接 在 本 质 上 属于 一 个 网 页 的 一 部 分 ， 它 是 一 种 允许 我 们 同 其 他 网 页 或 站 点 之 间 进行 连 
接 的 元 素 。 各 个 网 页 链接 在 一 起 后 ， 才 能 真正 构成 一 个 网 站 。 
7.1.1 超 链 接 基本 概念 

链接 是 从 一 个 网 页 或 文件 到 另 一 个 网 页 或 文件 的 访问 路 径 ， 不 但 可 以 指向 图 像 或 多 媒体 文 
件 ， 还 可 以 指向 电子 邮件 地 址 或 程序 等 。 当 网 站 访问 者 单 击 超 链接 时 ， 将 根据 目标 的 类 型 执行 
相应 的 操作 ， 即 在 Web 浏览 器 中 打开 或 运行 。 

要 正确 地 创建 超 链接 ， 就 必须 了 解 链接 与 被 链接 文档 之 间 的 路 径 ， 每 一 个 网 页 都 有 一 个 唯 
一 的 地 址 ， 称 为 统一 资源 定位 符 《〈URL) 。 网 页 中 的 超级 链接 按照 链接 路 径 的 不 同 ， 可 以 分 为 
相对 路 径 和 绝对 路 径 两 种 链接 形式 。 
7.1.2 ”常见 的 链接 路 径 

1， 相 对 路 径 
相对 路 径 对 于 大 多 数 的 本 地 链接 来 说 ， 是 最 适用 的 路 径 。 在 当前 文档 与 所 链接 的 文档 处 于 
同一 文件 夹 内 时 ， 文 档 相对 路 径 特别 有 用 。 文 档 相对 路 径 还 可 用 来 链接 到 其 他 的 文件 夹 中 的 文 
档 ， 方 法 是 利用 文件 夹层 次 结构 ， 指 定 从 当前 文档 到 所 链接 的 文档 的 路 径 ， 文 档 相对 路 径 省 略 
掉 对 于 当前 文档 和 所 链接 的 文档 都 相同 的 绝对 URL 部 分 ， 只 提供 不 同 的 路 径 部 分 。 
使 用 相对 路 径 的 好 处 在 于 ， 可 以 将 整个 网 站 移植 到 另 一 个 地 址 的 网 站 中 ， 而 不 需要 修改 文 
档 中 的 链接 路 径 。 

2， 绝 对 路 径 

绝对 路 径 是 包括 服务 器 规范 在 内 的 完全 路 径 ， 绝 对 路 径 不 管 源 文件 在 什么 位 置 ， 都 可 以 非 


网 页 设计 与 网 站 建设 完全 实战 手册 


常 精确 地 找到 ， 除 非 目标 文档 的 位 置 发 生变 化 ， 否 则 链接 不 会 失败 。 

采用 绝对 路 径 的 好 处 是 ， 它 同 链接 的 源 端 点 无 关 ， 只 要 网 站 的 地 址 不 变 ， 则 无 论文 档 在 站 
点 中 如 何 移动 ， 都 可 以 正常 实现 跳 转 而 不 会 发 生 错误 。 另 外 ， 如 果 希 望 链接 到 其 他 的 站 点 上 的 
文件 ， 就 必须 用 绝对 路 径 。 

采用 绝对 路 径 的 缺点 在 于 ， 这 种 方式 的 链接 不 利于 测试 ， 如 果 在 站 点 中 使 用 绝对 地 址 ， 要 
想 测试 链接 是 否 有 效 ， 就 必须 在 Internet 服务 器 端 对 链接 进行 测试 ， 它 的 另 一 个 缺点 是 不 利于 
站 点 的 移植 。 


创建 超 链接 


前 面 讲述 了 超 链接 的 基本 概念 和 创建 超 链接 的 方法 ， 通 过 前 面 的 学 习 读者 应 该 已 经 对 超 链 
接 有 了 大 概 的 了 解 ， 下 面 将 讲述 各 种 类 型 超 链接 的 创建 。 


7.2.1 “创建 电子 邮件 超 链接 


电子 邮件 地 址 作为 超 链 接 的 链接 目标 与 
其 他 链接 目标 不 同 。 当 用 户 在 浏览 器 上 单 击 ， 辆 打开 网 页 文档 ， 将 光标 置 于 要 创建 电子 邮 
指向 电子 邮件 地 址 的 超 链接 时 ， 将 会 打开 默 ” 件 超 链接 的 位 置 ， 如 图 7-2 所 示 。 

认 的 邮件 管理 器 的 新 邮件 窗口 ， 其 中 会 提示 
用 户 输入 信息 并 将 该 信息 传送 给 指定 的 E-mail 
地 址 。 下 面 对 文 字 “联系 我 们 ”创建 电子 邮 
件 超 链接 ， 当 单 击 文 字 “ 联 系 我 们 ”时 效果 


02 执行 “插入 ” | “电子 邮件 链接 ”命令 
如 图 7-3 所 示 。 


图 7-1 创建 电子 邮件 超 链接 的 效果 


太 提示 六 i 
单 击 电子 邮件 链接 后 ， 系 统 将 自动 启动 图 7-3 执行 “电子 邮件 链接 ”命令 
电子 邮件 软件 ， 并 在 收 件 人 地 址 中 自动 填写 ”本 弹出 “电子 邮件 链接 ”对 话 框 ， 在 对 话 杠 
上 电子 邮件 超 链接 所 指定 的 邮箱 地 址 。 的 “文本 ”文本 框 中 输入 “联系 我 们 ”, 在 E-mail 
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文本 框 中 输入 mailto: sdhzgw@163.com， 如 
图 7-4 所 示 。 


图 7-4 


“电子 邮件 链接 ”对 话 框 


友 高 手 支 招 女 
单 击 “ 常 用 ”插入 栏 中 的 “电子 邮件 链接 ” 
按钮 号 ,也 可 以 弹出 “电子 邮件 链接 ”对 话 框 。 


砚 单 击 “ 确 定 ” 按 钮 ， 创 建 电子 邮件 超 链 接 ， 
如 图 7-5 所 示 。 


图 7.5 创建 电子 邮件 起 链接 
本 保存 文档 , 按 F12 键 在 浏览 器 中 预览 单 击 “ 联 
系 我 们 ” 超 链接 文字 ， 效 果 参 见 图 7-1 所 示 。 


友 指点 迷津 克 

如 何 避 免 页 面 电 子 邮件 地 址 被 搜索 到 ? 

经 常会 收 到 不 请 自 来 的 垃圾 信 ， 如 果 拥 
有 一 个 站 点 并 发 布 了 E-mail 超 链接 ， 那 么 其 


他 人 会 利用 特殊 工具 搜索 到 这 个 地 址 并 加 入 


到 他 们 的 数据 库 中 。 要 想 避 免 E-mail 地 址 
被 搜索 到 ， 可 以 在 页 面 上 不 按 标准 格式 书写 
E-mail 链接 ， 如 youmame at mail.com， 它 等 
同 与 youmame@mail.com。 


7.2.2 创建 脚本 超 链接 


脚本 超 链 接 执行 JavaScript 代码 或 调用 
JavaScript 函数 ， 它 非常 有 用 ， 能 够 在 不 离开 
当前 网 页 文档 的 情况 下 为 访问 者 提供 有 关 某 
项 的 附加 信息 。 脚 本 超 链接 还 可 以 用 于 在 访 
问 者 单 击 特定 项 时 ， 执 行 计算 、 表 单 验证 和 
其 他 处 理 任务 ， 如 图 7-6 所 示 的 是 创建 脚本 关 
闭 网 页 的 效果 ， 具 体操 作 步 又 如 下 : 


原始 文件 | 原始 文件 /CH07/7.2.2/index.html 
最 终 文件 : 


I 


Nt 
NRA nam 


图 7-6 关闭 网 页 的 效果 


而 打开 网 页 文档 ， 选 中 文本 “关闭 窗口 ”， 
如 图 7-7 所 示 。 


图 7-7 打开 网 页 文档 


醒 在 “属性 ”面板 中 的 “链接 ”文本 框 中 输 
入 “javascript:window.close()”， 如 图 7-8 所 示 。 
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图 7-8 输入 链接 地 址 


丁 保 存 文档 ， 按 F12 键 在 浏览 器 中 浏览 ， 单 
击 “ 关 闭 窗 口 ”文本 超 链接 会 自动 弹出 一 个 
提示 对 话 框 ， 提 示 是 否 关 闭 窗 口 ， 单 击 “ 是 ” 
按钮 ， 即 可 关闭 窗口 ， 参 见 图 7-6 所 示 。 


7.2.3 ”创建 下 载 文件 超 链 接 


如 果 要 在 网 站 中 提供 下 载 资料 ， 就 需要 
为 文件 提供 下 载 超 链接 ， 如 果 超 级 链接 指向 
的 不 是 一 个 网 页 文件 ， 而 是 其 他 文件 ， 例 如 
zip、mp3、exe 文件 等 ， 单 击 超 链接 的 时 候 就 
会 下 载 文件 。 创 建 下 载 文件 的 超 链接 效果 如 
图 7-9 所 示 ， 具 体操 作 步 骤 如 下 : 


图 7-9 下 载 文件 的 超 链接 


原始 文件 ， | 原始 文件 /CH07/7.2.4/index.html 
最 终 文件 ， | 最 终 文件 /CH07/7.2.4/index1.html 
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六 提示 太 

网 站 中 每 个 下 载 文件 必须 对 应 一 个 下 载 
链接 ， 而 不 能 为 多 个 文件 或 一 个 文件 夹 建立 
下 载 超 链接 ， 如 果 需 要 对 多 个 文件 或 文件 来 
提供 下 载 ， 只 能 利用 压缩 软件 将 这 些 文件 或 
文件 夹 压缩 为 一 个 文件 。 


奇 打开 网 页 文档 ， 选 中 要 创建 超 链 接 的 文字 ， 
如 图 7-10 所 示 。 


图 7-10 打开 网 页 文档 


醒 执 行 “ 窗 口 ”|“ 属 性 ”命令 ， 打开 “属性 ” 
面板 ， 在 面板 中 单 击 “链接 ”文本 框 右边 的 
马 按 钮 ， 弹 出 “选择 文件 ”对 话 框 ， 在 对 话 
框 中 选择 要 下 载 的 文件 ， 如 图 7-11 所 示 。 

本 单 击 “ 确 定 ” 按 钮 , 添加 到 “链接 ”文本 框 中 ， 
如 图 7-12 所 示 。 

柄 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 单 
击 文字 “更 多 产品 ”， 效 果 参 见 图 7-9 所 示 。 


图 7-12 添加 到 “链接 ”文本 框 中 


7.2.4 创建 图 像 热点 超 链接 


在 创建 超 链接 的 过 程 中 ， 首 先 选 中 图 像 ， 
然后 在 “属性 ”面板 中 选择 热点 工具 在 图 像 上 
绘制 热 区 ， 创 建 图 像 热点 链接 后 ， 当 用 鼠标 单 
击 图 像 “ 网 站 首页 ”时 ， 效 果 如 图 7-13 所 示 ， 
会 出 现 一 个 小 手 形状 ， 具 体操 作 步骤 如 下 : 


图 7-13 图 像 热点 链接 效果 


原始 文体 “| 原始 文件 /CH07/7.2.4/index.html 
| 最 终 文件 | 最 终 文件 /CH07/7.2.4/index1 .html 


太 提 示 友 


当 预 览 网 页 时 ， 热 点 超 链 接 不 会 显示 ， 
当 将 鼠标 光标 移 至 热点 超 链接 上 时 会 变 为 手 
形 ， 以 提示 浏览 者 该 处 为 超 链接 。 


鸭 打开 网 页 文档 ， 选 中 创建 热点 超 链接 的 图 
像 ， 如 图 7-14 所 示 。 

吗 执行 “窗口 ” |“ 属 性 ”命令 ， 打 开 “ 属 性 ” 
面板 , 在 “属性 ”面板 中 单 击 “ 和 矩形 热点 工具 ” 


第 7 章 创建 网 页 超 链接 ”人 


图 7-15 


“属性 ”面板 


友 指点 迷津 太 
除了 可 以 使 用 “矩形 热点 工具 ”外 ， 还 可 
以 使 用 “椭圆 形 热点 工具 ”和 “多 边 形 热点 工 


绘制 的 方法 和 绘制 矩形 热点 区 域 一 样 。 


08 将 光标 置 于 图 像 上 要 创建 热点 的 部 分 ， 
制 一 个 矩形 热点 ， 如 图 7-16 所 示 。 


绘 


图 7-16 绘制 一 个 矩形 热点 


吗 按 以 上 步骤 绘制 其 他 的 热点 并 设置 热点 超 
链接 ， 如 图 7-17 所 示 。 


Ye 


三 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 当 
单 击 图 像 “ 网 站 首页 ”后 的 效果 参见 图 7-13 
所 示 。 


六 指点 迷津 女 

图 像 热点 超 链 接 和 图 像 超 链接 有 很 多 相 
似 之 处 ， 有 些 情 况 下 在 浏览 器 中 甚至 分 辨 不 
出 它们 。 虽 然 它们 的 最 终 效 果 基 本 相同 ， 但 
两 者 实现 的 原理 还 是 有 很 大 差异 的 。 读 者 在 
为 自己 的 网 页 加 入 超 链接 之 前 ， 应 根据 具体 
的 实际 情况 , 选择 和 使 用 适合 的 超 链接 方式 。 


图 7-17 绘制 其 他 的 热点 


管理 超 链接 


超 链接 是 网 页 中 不 可 缺少 的 一 部 分 ， 通 过 超 链 接 可 以 使 各 个 网 页 连接 在 一 起 ， 使 网 站 中 众 
多 的 网 页 构成 一 个 有 机 整体 ， 通 过 管理 网 页 中 的 超 链接 ， 也 可 以 对 网 页 进行 相应 的 管理 。 


7.3.1 ”检查 站 点 链接 


“检查 链接 ”功能 用 于 搜索 断 开 的 链接 和 孤立 文件 (文件 仍然 位 于 站 点 中 ， 但 站 点 中 没有 
任何 其 他 文件 链接 到 该 文件 ) 。 可 以 搜索 打开 的 文件 、 本 地 站 点 的 某 一 部 分 或 者 整个 本 地 站 点 。 
Dreamweaver 验证 仅 指 向 站 点 内 文档 的 链接 : Dreamweaver 将 出 现在 选 定 文档 中 的 外 部 链接 编 
辑 成 一 个 列表 ， 但 并 不 验证 它们 。 检 查 站 点 中 链接 错误 的 具体 操作 步骤 如 下 : 

加 执行 “站 点 ”|“ 检 查 站 点 范围 的 链接 ”命令 ,打开 “链接 检查 器 ”面板 ， 如 图 7-18 所 示 。 


显示 (5S): 了 ] 人 缸 接 文件 在 本 地 磁盘 没有 找到 ) 

文件 全 | 断 掉 的 出 接 

|- /原始 文件 106/6.Sfindexhtml qyjjasp?ename=jdjj 

工 /原始 文件 /06/6.S/index.html qyjj.asp?ename=xhjj 
加 /原始 文件 /06/6.: Te html gy. 


图 7-18 “ 企 接 检查 器 ” 志和 


鹃 在 “链接 检查 器 ”面板 中 , 从 “显示 ”弹出 菜单 中 选择 “ 断 掉 的 链接 ”命令 , 报告 即 出 现在 “ 链 
接 检查 器 ”面板 中 ， 如 图 7-19 所 示 。 


加 四 这 /原始 文件 /06/e Sfindex.html ee 
[5。/ 原 始 文件 /06/6.5jindex.html qyjasp?ename=gsjj 
总 共 231 个，75 个 HTML，66 个 孤立 文件 。 总 共 528 个 链接 ，302 个 正确 ，175 个 断 掉 ，51 个 外 部 链接 


图 7-19 选择 “ 断 掉 的 链接 ”命令 


本 在 “链接 检查 器 ”面板 中 ， 从 “显示 ”弹出 菜单 中 选择 “外 部 链接 ”命令 ,报告 即 出 现在 “ 链 
接 检 查 器 ”面板 中 ， 如 图 7-20 所 示 。 
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= 
| 于 人: [| ”| 抽 接 到 洁 点 外 页面. 不 能 检查) 


EE 全 [3 人 六 下 


图 7-20 选择 “外 部 链接 ”命令 


现在 “链接 检查 器 ”面板 中 ,从 “显示 ”弹出 菜单 中 选择 “孤立 的 文件 ”命令 , 报告 即 出 现在 “ 链 
接 检 查 器 ”面板 中 ， 如 图 7-21 所 示 。 


= 
全: [TE | CRA 和 ti 和) 
EE 


[5 /原始 文件 /04/431/indechtml 
[5 /原始 文件 /05/51.3/indecheml 
[5 /原始 文件 /05/51.indecl tml 
EE ， 55 个 3 


图 7-21 选择 “孤立 的 文件 ”命令 


7.3.2 ”更 改 站 点 链接 
更 改 站 点 链接 的 具体 操作 步骤 如 下 : 
面 执行“ 站 点 ”|* 改 变 站 点 范围 内 的 链接 ”命令 , 弹出 “更 改 整个 站 点 链接 (站 点 一 实例 素材 ) ” 
对 话 框 ， 在 对 话 框 中 进行 相应 的 设置 ， 如 图 7-22 所 示 。 
了 码 单 击 “ 确 定 ”按钮 ， 弹 出 “更 新 文件 ”对 话 框 ， 如 图 7-23 所 示 。 
大 单 击 “ 更 新 ”按钮 ， 即 可 更 改 站 点 链接 。 


用 更 新 以 下 文件 89 接 I9? 


7 原始 文件 /0777. 2. 1findex. htnl 
由 /原始 文件 /or77. 2. Linaexl. htnl 


更 改 所 有 的 树 接 (H): 
/不 始 文件 /07/7.2. VimageshEFT.jpg 


变 成 新 链接 (D): 
/原始 文件 /07/7.2.3hmages/YOU.Jpg 


图 7-22 “更 改 整个 站 点 链接 ( 站 点 一 实例 素材 ) ”对 话 框 图 7-23 “更 新 文件 ”对 话 框 


综合 实战 一 一 创建 图 像 热点 超 链 接 网 页 


有 时候 需要 在 一 张 图 片上 设置 几 个 区 域 ， 单 击 图 片 的 不 同 区 域 可 以 进入 不 同 的 页 面 ， 或 者 
是 单 击 图 片 的 某 一 块 区 域 进 入 某 一 个 页 面 ， 这 就 是 网 页 的 热点 超 链接 ， 创 建 图 像 热点 超 链接 的 
效果 如 图 7-24 所 示 ， 具 体操 作 步 骤 如 下 : 
原始 文件 : 原始 文件 /CH07/ 综合 实战 /index.html 
最 终 文件 : 最 终 文件 /CH07/ 综合 实战 iindexl.html 


而 选中 要 创建 热点 超 链接 的 图 像 ， 如 图 7-25 所 示 。 
现 打 开 “ 属 性 ”面板 ， 在 面板 中 选择 “ 拢 形 热 点 工具 ”， 如 图 7-26 所 示 。 
本 在 要 绘制 热点 的 位 置 按 住 鼠 标 左 键 拖 动 ， 以 绘制 矩形 热点 区 域 ， 如 图 7-27 所 示 。 
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专 一 才能 绥 造 铺 品 
专 一 才能 成 就 唯一 


世界 在 这 /市 场 在 变 /需求 在 变 
惟有 相 造 精品 的 心 从 未 改变 


Fran ,EF pF 
ER HR 


图 7-24 创建 热点 链接 


专 一 才能 成 就 唯一 


世界 在 秽 /市 场 在 兢 / 需 来 在 多 
惟有 要 造 祖 品 的 心 从 来 改变 
17 年 了 /不 二 出 的， 只 做 罗 


| 


图 7-26 选择 “矩形 热点 工具 ” 


保存 文档 ， 按 F12 键 ， 在 浏览 器 中 预览 ， 当 单 击 热点 超 链接 时 ， 效 果 参 见 图 7-24 所 示 。 
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DW mm we SR WA WN) ME) SH MN WN Bm- 


专 一 才能 稻 造 铺 品 


专 一 才能 艘 造 靖 郧 
专 一 才能 成 就 唯一 


专 一 才能 成 就 唯一 


世界 在 /市 场 在 交 / 玄 有 在 交 
只 有 归 千 本 品 的 心 从 未 改变 


Li 17 年 了 /的 Ro 


图 7-27 绘制 矩形 热点 区 域 
厅 按照 步骤 02 的 方法 绘制 其 他 的 热点 区 域 ， 如 图 7-28 所 示 。 


DW =) msl) EEM MA) PalM) Wlo) ee(0 mas) BW we 已 于 
indeemme x 
EE [3 


专 一 才能 艘 造 精品 


专 一 才能 成 就 唯一 


世界 在 朗 / 市 场 在 变 / 需 求 在 变 
唯 有 锋 造 精品 的 心 从 未 改变 
17 年 了 /不 干 别 的 ,只 做 餐 厅 计 内 


ee ST 


图 7-28 绘制 其 他 的 热点 区 域 


本 章 小 结 


超 链接 是 网 页 中 最 重要 、 最 根本 的 元 素 之 一 。 网 站 中 的 一 个 个 网 页 是 通过 超 链 接 联系 在 一 


起 的 ， 如 果 页 面 之 间 彼 此 是 独立 的 ， 那 么 这 样 的 网 站 是 无 法 运行 的 。 了 


E 是 因为 有 了 网 页 之 间 的 


链接 才 形 成 了 这 纷繁 复杂 的 网 络 世界 。Dreamweaver 提供 了 多 种 创建 超 链接 的 方法 ， 本 章 主要 


讲述 了 网 页 中 各 种 超 链接 的 创建 方法 。 
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第 日 章 使 用 行为 添加 网 页 特效 


Dreamweaver CC 提供 了 快速 制作 网 页 特效 的 行为 ， 通 过 行为 ， 即 使 不 会 编程 的 设计 者 也 
能 制作 出 漂亮 的 特效 ， 本 章 将 学 习 行 为 的 使 用 。 行 为 是 Dreamweaver 内 置 的 JavaScript 程序 库 。 
在 页 面 中 使 用 行为 可 以 将 JavaScript 程序 添加 到 页 面 中 ， 从 而 制作 出 具有 动态 效果 与 交互 效果 
的 网 页 。 


全 ”特效 中 的 行为 和 事件 全 ”认识 动作 
令 ”认识 事件 合 ”使 用 Dreamweaver 的 内 置 行为 


列 特效 中 的 行为 和 事件 


在 Dreamweaver 中 ， 行 为 是 事件 和 动作 的 组 合 。 事 件 是 在 特定 的 时 间或 是 用 户 在 某 时 所 发 
出 的 指令 后 紧 接 着 发 生 的 ， 而 动作 是 事件 发 生 后 ， 网 页 所 要 做 出 的 反应 。 


8.1.1 网 页 行为 
所 谓 的 动作 就 是 设 定 更 换 图 片 、 弹 出 警告 信息 框 等 特殊 的 JavaScript 效果 。 在 设 定 的 事件 
发 生 时 运行 动作 。 如 表 8-1 所 示 是 Dreamweaver 提供 的 常见 动作 。 
表 8-1 Dreamweaver 提供 的 常见 动作 
动 作 和 
改变 属性 改变 选择 对 象 的 属性 
检查 插件 确认 是 否 设 有 运行 网 页 的 插件 
拖 动 AP 元 素 允许 在 浏览 器 中 自由 拖 动 AP Div 
转 到 URL 可 以 转 到 特定 的 站 点 或 网 页 文档 上 
跳 转 菜单 可 以 创建 若干 个 链接 的 跳 转 菜单 
跳 转 菜单 开始 在 跳 转 菜单 中 选 定 要 移动 的 站 点 之 后 ， 只 有 单 击 “GO” 按 钮 才 可 以 移动 到 链接 的 站 点 上 
打开 浏览 器 窗口 “| 在 新 窗口 中 打开 URL 
弹出 消息 设置 的 事件 发 生 之 后 ， 弹 出 警告 信息 
预先 载 入 图 像 为 了 在 浏览 器 中 快速 显示 图 片 ， 事 先 下 载 图 片 之 后 显示 出 来 
设置 框架 文本 在 选 定 的 帧 上 显示 指定 的 内 容 
设置 状态 栏 文本 ”| 在 状态 栏 中 显示 指定 的 内 容 
设置 文本 域 文字 ”| 在 文本 字段 区 域 显示 指定 的 内 容 
显示 - 隐藏 元 素 ”| 显示 或 隐藏 特定 的 AP Div 


用 
OQ 
第 8 章 ”使 用 行为 添加 网 页 特效 


续 表 


发 生 设置 的 事件 后 ， 用 其 他 图 片 来 取代 选 定 的 图 片 
在 运用 交换 图 像 动 作 之 后 ， 显 示 原 来 的 图 片 
在 检查 表单 文档 有 效 性 的 时 候 使 用 


8.1.2 网 页 事件 


事件 用 于 指定 选 定 的 行为 动作 在 何 种 情况 下 发 生 。 如 果 想 应 用 单 击 图 像 时 跳 转 到 指定 网 站 
的 行为 ， 则 需要 把 事件 指定 为 单 击 瞬间 onClick。 如 表 8-2 所 示 是 Dreamweaver 中 常见 的 事件 。 
表 8-2 Dreamweaver 中 常见 的 事件 


事 件 

在 浏览 器 窗口 中 停止 加 载 网 页 文档 的 操作 时 发 生 的 事件 
移动 窗口 或 框架 时 发 生 的 事件 

onUnLoad 访问 者 退出 网 页 文档 时 发 生 的 事件 
用 鼠标 单 击 选 定 元 素 的 一 瞬间 发 生 的 事件 
鼠标 指针 移动 到 窗口 或 帧 外 部 ， 即 在 这 种 非 激活 状态 下 发 4 
onDragDrop 拖 动 并 放置 选 定 元 素 的 那 一 瞬间 发 生 的 事件 

onFocus 鼠标 指针 移动 到 窗口 或 帧 上 ， 激 活 之 后 发 生 的 事件 

onMouseMove 鼠标 指针 指向 字段 并 在 字段 内 移动 时 发 生 的 事件 

onMouseOnut 鼠标 指针 经 过 选 定 元 素 之 外 时 发 生 的 事件 

onMouseUp 单 击 鼠 标 右 键 ， 然 后 释放 时 发 生 的 事件 
访问 者 在 浏览 器 上 移动 滚动 条 时 发 生 的 事件 

当 访 问 者 按 下 任意 键 时 发 生 的 事件 

onKeyPress 当 访 问 者 按 下 和 释放 任意 键 时 发 生 的 事件 

onKeyUp 在 键盘 上 按 下 特定 键 并 释放 时 发 生 的 事件 

onAfterUpdate 更 新 表单 文档 内 容 时 发 生 的 事件 

onBeforeUpdate 改变 表单 文档 项 目 时 发 生 的 事件 

onChange 访问 者 修改 表单 文档 的 初始 值 时 发 生 的 事件 

onReset 将 表单 文档 重新 设置 为 初始 值 时 发 生 的 事件 
onSubmit 访问 者 传送 表单 文档 时 发 生 的 事件 
onSelect 访问 者 选 定 文本 字段 中 的 内 容 时 发 生 的 事件 
onError 在 加 载 文档 的 过 程 中 ， 发 生 错 误 时 发 生 的 事件 
onFilterChange 运用 于 选 定 元 素 的 字段 发 生变 化 时 发 生 的 事件 
Onfinish Marquee 用 功能 来 显示 的 内 容 结束 时 发 生 的 事件 
Onstart Marquee 开始 应 用 功能 时 发 生 的 事件 
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使 用 Dreamweaver 内 置 行为 


网 页 设计 与 网 站 建设 完全 实战 手册 


使 用 行为 提高 了 网 站 的 交互 性 。 在 Dreamweaver 中 插入 行为 ， 实 际 上 是 给 网 页 添加 了 一 些 
JavaScript 代码 ， 这 些 代码 能 实现 动态 的 网 页 效果 。 


8.2.1 ”交换 图 像 


“交换 图 像 ”动作 是 将 一 幅 图 像 替 换 成 
另外 一 幅 图 像 ， 一 个 交换 图 像 其 实 是 由 两 幅 
图 像 组 成 的 。 下 面 通过 实例 讲述 创建 交换 图 
像 的 方法 ， 鼠 标 未 经 过 图 像 时 的 效果 如 图 8-1 
所 示 , 当 鼠 标 经 过 图 像 时 的 效果 如 图 8-2 所 示 ， 
具体 操作 步骤 如 下 : 


-一 
~” 本 


> yy Ee 


为) 


图 8-2 鼠标 经 过 图 像 时 的 效果 
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原始 文件 : | 原始 文件 /CH08/8.2.Uindex.html 
最 终 文件 ， | 最 终 文件 /CH08/8.2.Uindexl.html 


咖 打 开 网 页 文档 ， 选 中 要 添加 行为 的 图 像 ， 
如 图 8-3 所 示 。 


图 8-3 打开 网 页 


醒 执 行 “ 窗 口 ”| “行为” 命令， 打开 “行为 ” 
面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 +.， 
在 弹出 的 菜单 中 选择 “交换 图 像 ” 命 令 ， 如 
图 8-4 所 示 。 


图 8-4 选择 “交换 图 像 ” 


三 弹出 “交换 图 像 ”对 话 框 ， 在 “图 像 ” 列 
表 框 中 选择 交换 的 图 像 ， 在 对 话 框 中 单 击 “ 设 
定 原始 档 为 ”文本 框 右边 的 “浏览 ”按钮 ， 

如 图 8-5 所 示 。 


图 8-5 “交换 图 像 ”对 话 框 
友 知识 要 点 次 
在 “交换 图 像 ” 对 话 框 中 可 以 进行 如 下 
设置 : 
。 图 像 : 在 列表 框 中 选择 要 更 改 其 源 
的 图 像 。 
。， 设 定 原始 档 为 : 单 击 “ 浏 览 ”按钮 
选择 新 图 像 文件 ， 文 本 框 中 显示 新 
图 像 的 路 径 和 文件 名 。 
。 预先 载 入 图 像 : 勾 选 该 复 选 框 ， 这 
样 在 载 入 网 页 时 ， 新 图 像 将 载 入 到 
浏览 器 的 缓冲 中 ， 防 止 当 图 像 该 出 
现时 由 于 下 载 而 导致 的 延迟 。 
。 鼠标 滑 开 时 恢复 图 像 : 勾 选 此 复 选 
框 表示 当 鼠 标 离开 图 片 时 ， 图 片 会 
自动 恢复 为 原始 图 像 。 


吧 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选 


三 单 击 “ 确 定 ” 按 钮 , 添加 到 文本 框 中 , 如 图 8-7 
所 示 。 


图 8-7 “交换 图 像 ” 对 话 框 


西单 击 “ 确 定 ” 按 钮 ， 添 加 行为 到 “行为 ” 
面板 中 ， 如 图 8-8 所 示 。 


图 8-8 添加 行为 到 面板 


友 提示 女 

“交换 图 像 ” 动 作 自 动 预先 载 入 在 “ 交 
换 图 像 ”对 话 框 中 勾 选 “预先 载 入 图 像 ” 
复 选 框 时 所 有 高 亮 显示 的 图 像 ， 因 此 当 使 
用 “交换 图 像 ” 时 不 需要 手动 添加 预先 载 
入 图 像 。 


三保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 鼠 
标 指针 未 接近 图 像 时 的 效果 参见 图 8-1 所 示 ， 
鼠标 指针 接近 图 像 时 的 效果 参见 图 8-2 所 示 。 


六 指点 迷津 六 

如 果 没有 为 图 像 命 名 ，“ 交 换 图 像 ” 动 
作 仍 将 起 作用 ; 当 将 该 行为 附加 到 某 个 对 象 
时 ， 它 将 为 未 命名 的 图 像 自 动 命名 。 但 是 ， 
如 果 所 有 图 像 都 预先 命名 ， 则 在 “交换 图 像 ” 
对 话 框 中 更 容易 区 分 它们 。 
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网 页 设计 与 网 站 建设 完全 实战 手册 


8.2.2 ”弹出 提示 信息 

弹出 信息 显示 一 个 带 有 指定 信息 的 警告 
窗口 ， 因 为 该 警告 窗口 只 有 一 个 “确定 ”按钮 ， 
所 以 使 用 此 动作 可 以 提供 信息 ， 而 不 能 为 用 
户 提供 选择 。 创 建 的 弹出 提示 信息 网 页 的 效 
果 如 图 8-9 所 示 ， 具 体操 作 步 又 如 下 : 


原始 文件 : | 原始 文件 /CH08/8.2.2/index.htm 
最 终 文件 : 


轩 打开 网 页 文档 ， 单 击 文档 窗口 中 左下 角 的 
<body> 标签 ， 如 图 8-10 所 示 。 


[rE Om Wa wail S01 a EW Wt el 


图 8-10 打开 网 页 文档 
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友 提示 妈 
按 Shift+F4 组 合 键 也 可 以 打开 “行为 ” 
面板 。 


02 执行 “窗口 ”|“ 行 为” 命令， 打开“ 行为 ” 
面板 ， 在 “行为 ”面板 中 单 击 “ 添 加 行为 ” 
按钮 嘻 ， 在 弹出 的 菜单 中 选择 “弹出 信息 ” 
命令 ， 如 图 8-11 所 示 。 


er 去 = 

图 8-11 选择 “弹出 信息 ”命令 
03 弹出 “弹出 信息 ”对 话 框 ， 在 对 话 框 中 输 
入 文本 “您 好 ， 欢 迎 光临 我 们 的 网 站 !”， 如 
图 8-12 所 示 。 


图 8-12 “弹出 信息 ”对 话 框 


叹 单 击 “ 确 定 ” 按 钮 ， 添 加 行为 ， 如 图 8-13 
所 示 。 


图 8-13 添加 行为 


丁 保 存 文档 ， 按 F12 键 即 可 在 浏览 器 中 看 到 
弹出 的 提示 信息 ， 网 页 效果 参见 图 8-9 所 示 。 


六 提示 友 
信息 一 定 要 简短 ， 如 果 超 出 状态 栏 的 大 
小 ， 浏 览 器 将 自动 截断 该 信息 。 


8.2.3 ”打开 浏览 器 窗口 

使 用 “打开 浏览 器 窗口 ”动作 ， 在 打开 
当前 网 页 的 同时 ， 还 可 以 再 打开 一 个 新 的 窗 
口 。 应 用 打开 浏览 器 窗口 行为 的 网 页 效果 如 
图 8-14 所 示 ， 具 体操 作 步 又 如 下 : 


原始 文件 | 原始 文件 /CH08/8.2.3/index.html 


最 终 文件 /CHO8/8.2.3/index1 html 


Ey 


热烈 庆祝 万 信 电 气 有 限 公司 网 站 成 功 开 


图 8-14 打开 浏览 器 窗口 网 页 的 效果 


三 打 开 网 页 文档 ， 如 图 8-15 所 示 。 

三 执 行 “ 窗 口 " | “行为 ” 命令， 打开“ 行为 ” 
面板 ， 在 “行为 ”面板 中 单 击 “添加 行为 ” 
按钮 别 ， 在 弹出 的 菜单 中 选择 “打开 浏览 器 
窗口 ”命令 ， 如 图 8-16 所 示 。 


友 指点 迷津 女 


| 8-16 选择 “打开 浏览 器 窗口 到 
区 选择 命令 后 ， 弹 出 “打开 浏览 器 窗口 ”对 
话 框 ， 如 图 8-17 所 示 。 


图 8-17 “打开 浏览 器 窗口 ”对 话 框 


“打开 浏览 器 窗口 ”对 话 框 中 可 以 进行 如 下 设置 : 
。 要 显示 的 URL: 输入 浏览 器 窗口 中 要 打开 的 链接 路 径 ， 可 以 单 击 “ 浏 览 ”按钮 找到 


要 在 浏览 器 窗口 打开 的 文件 。 
。 窗口 宽度 : 设置 窗口 的 宽度 。 
。 窗口 高 度 : 设置 窗口 的 高 度 。 
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。 属性 : 设置 打开 浏览 器 窗口 的 一 些 参数 。 选 中 “导航 工具 栏 ” 为 包含 导航 条 ; 选中 “ 菜 
单条 ” 复 选 框 ， 表 示 包 含 菜单 条 ; 选中 “地 址 工具 栏 ” 复 选 框 后 ， 在 打开 浏览 器 窗 
口中 显示 地 址 栏 ; 选中 “需要 时 使 用 滚动 条 ” 复 选 框 ， 如 果 窗 口中 内 容 超 出 窗口 大 小 ， 
则 显示 滚动 条 ;选中 “状态 栏 ” 复 选 框 后 ， 可 以 在 弹出 窗口 中 显示 滚动 条 ， 选中 “ 调 
整 大 小 手柄 ” 复 选 框 ， 浏 览 者 可 以 调整 窗口 大 小 。 


。 窗口 名 称 : 给 当前 窗口 命名 。 


咀 在 对 话 框 中 单 击 “ 要 显示 的 URL” 文 本 框 
右边 的 “浏览 ”按钮 ， 弹 出 “选择 文件 ”对 
话 框 ， 在 对 话 框 中 选择 chuangkou.html， 如 图 
8-18 所 示 。 


各 落 刚 型 示 


西单 击 “ 确 定 ” 按 钮 ， 将 文件 添加 到 文本 框 ， 
将 “ 宽 ” 设 置 为 500、“ 高 ”设置 为 250, 在 “ 窗 
口 名 称 ” 文 本 框 中 输入 名 称 ,“ 属 性 ”选择 “ 调 


整 大 小 手柄 ”、“ 菜 单条 ”、“ 需 要 时 使 用 


滚动 条 ”， 如 图 8-19 所 示 。 


要 显示 的 URL chuangkou. htnl 


窗口 计 吕 才 放 : 360 


500 


“打开 浏览 器 窗口 ”对 话 框 


图 8-19 
06 单 击 “ 确 定 ” 按 钮 ， 将 行为 添加 到 “行为 ” 
面板 中 ， 如 图 8-20 所 示 。 
叹 保 存 文 档 ， 按 F12 键 在 浏览 器 中 可 以 预览 
效果 ， 如 图 8-14 所 示 。 
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图 8-20 添加 行为 


8.2.4 转 到 URL 


“ 转 到 URL” 动 作 是 设置 超 链接 时 使 用 
的 动作 。 通 常 的 超 链 接 是 在 单 击 后 跳 转 到 相 
应 的 网 页 文档 中 ， 但 是 “ 转 到 URL” 动 作 在 
把 鼠标 放 上 后 或 者 双击 时 ， 都 可 以 设置 不 同 
的 事件 来 加 以 链接 。 跳 转 前 后 的 效果 分 别 如 
图 8-21 所 示 和 8-22 所 示 , 具体 操作 步 又 如 下 : 


SOFASEE 


一 一 一 一， 


| 时 尚 沙 发 今日 和 点 
EE 


图 8-21 跳 转 前 的 效果 


图 8-22 跳 转 后 的 效果 


原始 文件 ，| 原始 文件 /CH08/8.2.4/index.html 
最 终 文件 ，| 最终 文件 /CH08/8.2.4/indexl.html 


打开 网 页 文档 ， 如 图 8-23 所 示 。 


EC 


图 8-23 打开 网 页 文档 


02 单 击 文档 窗口 中 的 <body> 标签 ， 执 行 “ 窗 
口 ”| “行为 ”命令 ， 打开“ 行为” 面板， 在 
面板 中 单 击 “ 添 加 行为 ”按钮 出， 在 弹出 的 


第 8 章 ”使 用 行为 添加 网 页 特效 


03 弹出 “ 转 到 URL” 对 话 框 ， 在 对 话 框 中 单 
击 “URL” 文 本 框 右边 的 “浏览 ”按钮 , 如 图 8-25 
所 示 。 


图 8-25 “ 转 到 URL” 对 话 框 
六 知识 要 点 六 
“ 转 到 URL” 对 话 框 中 可 以 进行 如 下 
设置 : 
。 打开 在 : 选择 打开 链接 的 窗口 。 如 
果 是 框架 网 页 ， 选 择 打开 链接 的 框 
架 。 
。 URL: 输入 链接 的 地 址 ， 也 可 以 单 
击 “ 浏 览 ” 按 钮 在 本 地 硬盘 中 查找 
链接 的 文件 。 


盈 弹 出 “选择 文件 ”对 话 框 ， 在 对 话 框 中 选 
择 indexl.htm， 如 图 8-26 所 示 。 


图 8-24 选择 “ 转 到 URL” 命 令 


图 8-26 “选择 文件 ”对 话 框 


05 单 击 “ 确 定 ” 按 钮 , 将 文件 添加 到 文本 框 中 ， 
如 图 8-27 所 示 。 


图 8-27 设置 “ 转 到 URL” 对 话 框 
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本 单 击 “ 确 定 ”按钮 ， 将 行为 添加 到 “行为 ” 
面板 中 ， 如 图 8-28 所 示 。 


原始 文件 : 
最 终 文件 : 


加 打开 网 页 文档 ， 选 中 图 像 ， 如 图 8-30 所 示 。 


原始 文件 /CH08/8.2.S/index.html 
最 终 文件 /CH08/8.2.5/index1.html 


inane sex5 oasisaea| 


图 8-28 添加 到 “行为 ”面板 


保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 跳 
转 前 后 的 效果 分 别 参 见 图 8-21 和 图 8-22 所 示 。 


8.2.5 ”预先 载 入 图 像 

“预先 载 入 图 像 ”动作 将 不 会 使 网 页 中 
选中 的 图 像 ( 如 那些 通过 行为 或 JavaScript 调 
入 的 图 像 ) 立即 出 现 ， 而 是 先 将 它们 载 入 到 
浏览 器 的 缓存 中 。 这 样 做 可 以 防止 当 图 像 应 
该 出 现时 由 于 下 载 而 导致 延迟 。 预 先 载 入 图 
片 的 效果 如 图 8-29 所 示 ， 具 体操 作 步骤 如 下 : 

CT 


打造 高 科技 生态 农业 精品 
科技 文化 循环 生态 和 谐 


图 8-29 预先 载 入 图 片 的 效果 


92 


打造 高 科技 生态 农 几 丹 
科技 文化 循环 生态 和 谐 ， 


图 8-30 打开 网 页 文档 


到 执行 “窗口 ”| 行为” 命令， 打开“ 行为 ” 
面板 ， 在 面板 中 单 击 “ 添 加 行为 ”按钮 国 ， 
在 弹出 的 菜单 中 选择 “预先 载 入 图 像 ” 动 作 
命令 ， 如 图 8-31 所 示 。 


[EEC 


图 8-31 选择 “预先 载 入 图 像 ” 命 令 

艳 弹出 “预先 载 入 图 像 ”对 话 框 ， 在 对 话 框 
中 单 击 “ 图 像 源 文件 ”文本 框 右边 的 “浏览 ” 
按钮 ， 如 图 8-32 所 示 。 

友 提示 友 

如 果 在 输入 下 一 个 图 像 之 前 用 户 没 有 单 
击 “ 添 加 ”按钮 ， 则 列表 中 用 户 刚 选择 的 图 
像 将 被 所 选择 的 下 一 个 图 像 蔡 换 。 


吗 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选 


择 预 载 入 的 图 像 ， 如 图 8-33 所 示 。 


第 8 章 ”使 用 行为 添加 网 页 特效 


”8.2.6 调用 Javascript 


下 面 创建 一 个 调用 JavaScript 自动 关闭 网 页 
”的 效果 ， 如 图 8-36 所 示 ， 具 体操 作 步骤 如 下 : 


图 8-32 “预先 载 入 图 像 ” 对 话 框 


图 8-33 “选择 图 像 源 文件 ”对 话 框 en CF rene wae sma me A ein 
枉 单 击 “ 确 定 ” 按 钮 ， 添 加 到 文本 框 中 ， 如 图 8-36 利用 JavaScript 自动 关闭 网 页 的 效果 


图 8-34 所 示 。 
原始 文件 : 


图 8-34 “预先 载 入 图 像 ” 对 话 框 


西单 击 “ 确 定 ” 按 钮 ， 添 加 行为 到 “行为 ” 
面板 中 ， 如 图 8-35 所 示 。 


图 8-37 打开 网 页 文档 


“ 醒 单 击 文档 窗口 中 左下 角 的 <body> 标签 ， 执 

， 行 “窗口 ”1 “行为” 命令, 打开 “行为 ”面板 ， 

“在 “行为 ”面板 中 单 击 “添加 行为 ”按钮 局， 

“在 弹出 的 菜单 中 选择 “调用 JavaScript” 命 令 ， 
图 8-35 添加 行为 到 “行为 ”面板 | 如 图 8-38 所 示 。 

柄 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 , 效 ， 

果 参 见 图 8-29 所 示 。 | 


”3 


用 onSubmit 事件 将 其 附加 到 表单 ， 在 用 户 单 
击 “ 提 交 ” 按 钮 时 同时 对 多 个 文本 域 进行 检 
查 。 将 此 动作 附加 到 表单 ， 防 止 表 单 提 交 到 
服务 器 后 文本 域 包含 无 效 的 数据 。“ 检 查 表 
单 ” 动 作 的 效果 如 图 8-41 所 示 ， 具 体操 作 步 
又 如 下 : 


图 8-38 选择 “调用 JavaScript” 选 项 


选择 命令 后 ， 弹 出 “调用 JavaScript” 对 
话 框 ， 在 对 话 框 中 的 JavaScript 文本 框 中 输入 
window.close0， 如 图 8-39 所 示 。 


= 国 = 
四 839 办 和 代码 WE 
砚 单 击 “ 确 定 ”按钮 ， 添加 到 “行为 ”面板 中 ， 国 8-41 柱 二 未 下 烤 尝 


人 onload， 如 图 8-40 所 示 。 i 原始 文件 ， | 原始 文 件 /CHO8/8.2.7/index html 
le TT TE 最 终 文件 /CHO8/8.2.7/index1.html 


加 打开 网 页 文档 ， 如 图 8-42 所 示 。 


图 8-40 添加 到 “行为 ”面板 
枉 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 8-36 所 示 。 ES 
8.2.7 ”检查 表单 图 8-42 打开 网 页 文档 

“检查 表单 ”动作 检查 指定 文本 域 的 内 ” 梗 选 中 表单 域 ， 执行 “窗口 ”|“ 行 为” 命令， 
容 以 确保 用 户 输入 了 正确 的 数据 类 型 。 使 用 ”打开 “行为 ”面板 , 在 面板 中 单 击 “ 添 加 行为 ” 


onBlur 事件 将 此 动作 分 别 附加 到 各 文本 域 ， 按钮 同 ， 在 弹出 的 菜单 中 选择 “检查 表单 ” 
在 用 户 填写 表单 时 对 文本 域 进行 检查 ; 或 使 《命令 ， 如 图 8-43 所 示 。 
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这 时 会 出 现 提示 信息 框 ， 并 要 求 重新 输入 ， 
如 图 8-41 所 示 。 


图 8-43 选择 “检查 表单 ”命令 


03 选择 命令 后 ， 弹 出 “检查 表单 ”对 话 框 ， 
在 对 话 框 中 进行 相应 的 设置 , 如 图 8-44 所 示 。 


售 同 友和 


可 接受 局 任何 东西 ® 于 
电子 邮件 地 址 数字 从 到 


图 8-44 “检查 表单 ”对 话 框 


友 知识 要 点 克 
在 该 对 话 框 默认 状态 中 的 “可 接受 ” 选 
项 组 中 可 以 进行 如 下 设置 : 

。 任何 东西 : 如 果 该 文本 域 是 必需 的 ， 
但 不 需要 包含 任何 特定 类 型 的 数 
据 ， 则 选择 “任何 东西 ” 单 选 按钮 。 

。 电子 邮件 地 址 ; 使 用 “电子 邮件 地 
址 ”选项 检查 该 域 是否 包 含 一 个 @ 
符号 。 

。 数字 : 使 用 “数字 ”选项 检查 该 文 
本 域 是 否 只 包含 数字 。 

。 数字 从 : 使 用 “数字 从 ”选项 检查 该 
文本 域 是 否 包含 特定 范围 内 的 数字 。 


吗 单 击 “ 确 定 ” 按 钮 ,添加 到 “行为 ”面板 中 ， 
将 事件 设置 为 onSubmit， 如 图 8-45 所 示 。 

葬 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 效果 。 
当 在 文本 域 中 输入 不 规则 的 电子 邮件 地 址 和 
姓名 时 ,表单 将 无 法 正常 提交 到 后 台 服 务 器 ， 


图 8-45 添加 到 “行为 ”面板 


8.2.8 ”设置 状态 栏 文本 

“设置 状态 栏 文本 ”用 于 设置 状态 栏 中 
显示 的 信息 ， 在 适当 的 触发 事件 触发 后 ， 在 
状态 栏 中 显示 信息 。 下 面 通过 实例 讲述 状态 
栏 文本 的 设置 ， 效 果 如 图 8-46 所 示 ， 具 体操 
作 步 又 如 下 : 


图 8-46 设置 状态 栏 文本 的 效果 


友 提示 友 

“设置 状态 栏 文本 ”行为 的 作用 与 弹出 
信息 行为 很 相似 ， 不 同 的 是 如 果 使 用 消息 杠 
来 显示 文本 ， 访 问 者 必须 单 击 “ 确 定 ” 按 钮 
才 可 以 继续 浏览 网 页 中 的 内 容 。 而 在 状态 栏 
中 显示 的 文本 信息 不 会 影响 访问 者 的 浏览 速 
度 。 浏 览 者 会 常常 忽略 状态 栏 中 的 消息 ， 如 
果 消 息 非常 重要 ， 则 考虑 将 其 显示 为 弹出 式 
消息 或 层 文本 。 
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原始 文件 /CH08/8.2.8/index .html 
最 终 文件 /CH08/8.2.8/indexl.html 


原始 文件 : 
最 终 文件 : 


03 弹出 “设置 状态 栏 文本 ”对 话 框 , 在 “消息 ” 
文本 框 中 输入 文本 “本 公司 10 周年 庆典 优惠 


0 打开 网 页 文档 ， 单 击 文档 窗 
<body> 标签 ， 执 行 “ 窗 口 ” 
如 图 8-47 所 示 。 


中 左下 角 的 
1 “行为 ” 


命令 ， 


图 8-47 打开 网 页 文档 
吧 打开 “行为 ”面板 ， 单 击 “ 添 加 行为 ” 按 
钮 二 ,在 弹出 的 菜单 中 选择 “设置 文本 ”|“ 设 
置 状 态 栏 文本 ”命令 ， 如 图 8-48 所 示 。 


图 8-48 这 择 ， “设置 状态 栏 文本 ”命令 


本 章 小 结 
本 章 主要 讲解 了 “行为 ”的 基本 概念 ， 


“行为 ” 本身 ， 读 者 在 使 用 时 一 定 要 注意 确保 合理 


如 图 8-49 所 示 。 


活动 正在 进行 中 ……”， 


[取消 ] 
[帮助 ] 


注意 - 并 村 所 有 浏览 器 部 支持 更 改 捧 态 栏 文本 ， 某 些 浏览 
器 会 根据 用 户 首选 关 雪 未 确定 是 否 允 许 此 功能 。 


图 8-49 “设置 状态 栏 文本 ”对 话 框 


交 提示 友 

在 “设置 状态 栏 文本 ”对 话 框 中 的 “消息 ” 
文本 框 中 输入 消息 。 保 持 该 消息 简明 扼要 ， 
如 果 消 息 不 能 完全 放 在 状态 栏 中 ， 浏 览 器 将 
截断 消息 。 
三 单 击 “ 确 定 ” 按 钮 ， 将 行为 添加 到 “行为 ” 
面板 中 ， 如 图 8-50 所 示 。 


图 8-50 添加 行为 


按 F12 键 在 浏览 器 中 预览 ， 效 
图 8-46 所 示 。 


05 保存 文档 ， 
果 参 见 


以 及 Dreamweaver 内 置 “ 行 为 ”的 操作 方法 。 对 于 
E 和 恰当 ， 并 且 一 个 网 页 中 不 要 使 用 过 多 的 “ 行 


为 ”。 
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只 有 这 样 ， 设 计 才能 够 得 到 事半功倍 的 效果 。 


第 纺 章 “利用 表单 对 象 创建 表单 文件 


在 网 站 中 , 表单 是 实现 网 页 上 数据 传输 的 基础 ， 其 作用 就 是 实现 访问 者 与 网 站 之 问 的 交互 。 


利用 表单 ， 可 以 根据 访问 者 输入 的 信息 ， 自 动 生成 页 面 反 馈 给 访问 者 ， 还 可 以 为 网 站 收集 访问 
者 输入 的 信息 。 表 单 可 以 包含 允许 进行 交互 的 各 种 对 象 ， 包 括 文本 域 、 列 表 框 、 复 选 框 、 单 选 
按钮 、 图 像 域 、 按 钮 及 其 他 表单 对 象 。 本 章 将 讲述 表单 对 象 的 使 用 和 制作 表单 网 页 的 常用 技巧 。 


令 了 解 表单 概述 全 制作 网 站 注册 页 面 
令 插入 输入 类 表单 对 象 


表单 概述 


表单 网 页 是 一 个 网 站 和 访问 者 开展 互动 的 窗口 ， 表 单 可 以 用 来 在 网 页 中 发 送 数据 ， 特 别 是 
经 常 被 用 在 联系 表单 上 ， 用 户 输入 信息 后 发 送 到 E-mail 中 。 


9.1.1 关于 表单 

表单 是 由 窗 体 和 控件 组 成 的 ， 一 个 表单 一 般 应 该 包含 用 户 填写 信息 的 输入 框 、 提 交 和 按钮 
等 ， 这 些 输入 框 和 按钮 称 为 控件 ， 表 单 很 像 容器 ， 它 能 够 容纳 各 种 各 样 的 控件 。 

一 个 完整 的 表单 设计 应 该 很 明确 地 分 为 两 个 部 分 : 表单 对 象 部 分 和 应 用 程序 部 分 ， 它 们 分 
别 由 网 页 设计 师 和 程序 设计 师 来 设计 完成 。 其 过 程 是 这 样 的 ， 首 先 由 网 页 设计 师 制 作出 一 个 可 
以 让 浏览 者 输入 各 项 资料 的 表单 页 面 ， 这 部 分 属于 在 显示 器 上 可 以 看 得 到 的 内 容 ， 此 时 的 表单 
只 是 一 个 外 壳 而 已 ， 不 具有 真正 工作 的 能 力 ， 需 要 后 台 程 序 的 支持 。 接 着 由 程序 设计 师 通过 
ASP 或 者 CGI 程序， 来 编写 处 理 各 项 表单 资料 和 反馈 信息 等 操作 所 需 的 程序 ， 这 部 分 内 容 浏 
览 者 虽然 看 不 见 ， 但 却 是 表单 处 理 的 核心 。 


9.1.2 ”表单 元 素 介绍 
Dreamweaver 作为 一 种 可 视 化 的 网 页 设计 软件 ， 表 单 是 不 可 缺少 的 一 部 分 ， 本 章 介 绍 表单 
在 页 面 中 的 界面 设计 。 
表单 用 <form></form> 标记 来 创建 ， 在 <form></form> 标记 之 间 的 部 分 都 属于 表单 的 内 容 。 
<form> 标记 具有 action、method 和 target 属性 。 
。 action 的 值 是 处 理 程序 的 程序 名 , 如 <form action="URL ">, 如 果 这 个 属性 是 空 值 ("") ， 
则 当前 文档 的 URL 将 被 使 用 ， 当 用 户 提交 表单 时 ， 服 务 器 将 执行 这 个 程序 。 
。 ”method 属性 用 来 定义 处 理 程序 从 表单 中 获得 信息 的 方式 , 可 取 GET 或 POST 中 的 一 个 。 
GET 方式 是 处 理 程序 从 当前 HIML 文档 中 获取 数据 ， 这 种 方式 传送 的 数据 量 是 有 所 
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限制 的 ， 一 般 限制 在 1KB (255 个 字 节 ) 以 下 。POST 方式 传送 的 数据 比较 大 ， 它 是 
用 当前 的 HIML 文档 把 数据 传送 给 处 理 程序 ， 传 送 的 数据 量 要 比 GET 方式 大 得 多 。 
。 target 属性 用 来 指定 目标 窗口 或 目标 帧 。 


by 插入 输入 类 表单 对 象 


可 以 使 用 Dreamweaver 创建 带 有 文本 域 、 密 码 域 、 单 选 按钮 、 复 选 框 、 选 择 、 按 钮 及 其 他 
输入 类 型 的 表单 ， 这 些 输入 类 型 又 称 为 表单 对 象 。 


9.2.1 插入 表单 域 太 提示 太 

使 用 表单 必须 具备 的 条 件 有 两 个 ， 一 个 是 在 “表单 ”插入 栏 中 单 击 “ 表 单 ”按钮 
含有 表单 元 素 的 网 页 文档 ， 另 一 个 是 具备 服务 。” 恒 ， 也 可 以 插入 表单 。 
器 端的 表单 处 理应 用 程序 或 客户 端 脚本 程序 ， 大 执 行 命令 后 ， 页 面 中 就 会 出 现 红色 的 虚线 ， 
它 能 够 处 理 用 户 输入 到 表单 的 信息 。 下 面 创建 这 个 虚线 就 是 表单 ， 如 图 9.3 所 示 。 
一 个 基本 的 表单 ， 具 体操 作 步 又 如 下 : 
国 启动 Dreamweaver CC， 打 开 网 页 文档 ， 如 
图 9-1 所 示 。 将 光标 置 于 文档 中 要 插入 表单 的 
位 置 。 


图 9-3 插入 表单 


友 提示 女 

执行 命令 后 , 如 果 看 不 到 红色 虚线 表单 ， 

二 于 让 而 亲 交 六 可 以 执行 “查看 ” |“ 可视化 助理 ”|“ 不 可 
见 元 素 ”命令 ， 从 而 看 到 插入 的 表单 。 


[7 于 6 站 yi » . 
且 加 入 ”|“ 表 弟 ”| “表单 ”命令 ， 姑 加 选 中 表单， 在 “属性 ”面板 中 ， 设 置 表单 
的 属性 ， 如 图 9-4 所 示 。 


图 9-2 执行 “表单 ”命令 图 9-4 设置 表单 的 属性 
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六 知识 要 点 友 
在 表单 的 “属性 ”面板 中 可 以 设置 以 下 参数 : 


“Form ID”: 输入 标识 该 表单 的 唯一 名 称 。 

“Action”: 指定 处 理 该 表单 的 动态 页 或 脚本 的 路 径 。 可 以 在 “动作 ”文本 框 中 输入 
完整 的 路 径 ， 也 可 以 单 击 文件 夹 图 标 浏览 应 用 程序 。 如 果 读 者 并 没有 相关 程序 支持 
的 话 ， 也 可 以 使 用 E-mail 的 方式 来 传输 表单 信息 ， 这 种 方式 需要 在 “动作 ”文本 框 
中 输入 “mailto: 电子 邮件 地 址 ”的 内 容 ， 比 如 “mailto:jsxson@sohu.com”， 表 示 提 
交 的 信息 将 会 发 送 到 邮箱 中 。 

“Method”: 在 “method” 下 拉 列 表 中 ， 选 择 将 表单 数据 传输 到 服务 器 的 传送 方式 ， 
包括 3 个 选项 。 读 者 可 以 选择 速度 快 但 携带 数据 量 小 的 GET 方法 ， 或 者 数据 量 大 的 
POST 方法 。 一 般 情况 下 应 该 使 用 POST 方法 ， 这 在 数据 保密 方面 也 有 好 处 。 
> “POST”: 用 标准 输入 方式 将 表单 内 的 数据 传送 给 服务 器 ， 服 务 器 用 读 取 标 准 

输入 的 方式 读 取 表单 内 的 数据 。 

> “GET”: 将 表单 内 的 数据 附加 到 URL 后 面 传送 给 服务 器 ， 服 务 器 用 读 取 环 境 

变量 的 方式 读 取 表 单 内 的 数据 。 

> “Method ”: 用 浏览 器 默认 的 方式 ， 一 般 默 认为 GET。 

“Enctype”: 用 来 设置 发 送 数据 的 MIME 编码 类 型 ， 一 般 情况 下 应 选择 application/ 
xX- WWW-form-urlencoded。 

“Target”: 使 用 “目标 ”下 拉 列 表 指 定 一 个 窗口 ， 这 个 窗口 中 显示 应 用 程序 或 者 脚 
本 程序 将 表单 处 理 完成 后 所 显示 的 结果 。 
> “ blank”: 反馈 网 页 将 在 新 开 窗 口 里 打开 。 
> “ parent”: 反馈 网 页 将 在 副 窗口 里 打开 。 

六 “_ self”: 反馈 网 页 将 在 原 窗口 里 打开 。 
> “ top”: 反馈 网 页 将 在 顶层 窗口 里 打开 。 

“Class”: 在 此 下 拉 列 表 中 选择 要 定义 的 表单 样式 。 


9.2.2 ”插入 文本 域 


文本 域 接受 任何 类 型 的 字母 及 数字 输入 内 容 。 文 本 域 主要 用 于 单行 信息 的 输入 ， 创 建文 本 
域 的 具体 操作 步骤 如 下 : 


到 将 光标 置 于 表单 中 ， 执 行 “ 插 入 ”| “表格 ” 
命令 , 弹出 “表格 ”对 话 框 , 在 对 话 框 中 将 “ 行 
数 ” 设 置 为 10、“ 列 ”设置 为 2, 如 图 9-5 所 示 。 
02 单 击 “ 确 定 ” 按 钮 , 插入 表格 , 如 图 9-6 所 示 。 
吗 将 光标 置 于 表格 的 第 1 行 1 列 单元 格 中 ， 
输入 相应 的 文字 ， 如 图 9-7 所 示 。 

04 将 光标 置 于 表格 的 第 1 行 第 2 列 单元 格 中 ， 
执行 “插入 ”|“ 表 单 ”|“ 文 本 ”命令 ,插入 
文本 域 ， 如 图 9-8 所 示 。 


图 9-5 “表格 ”对 话 框 
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图 9-8 插入 文本 域 


友 提示 妈 
在 “表单 ”插入 栏 中 单 击 “ 文 本 ”按钮 
口 ， 也 可 以 插入 文本 域 。 


西 选 中 插入 的 文本 域 ， 打 开 “ 属 性 ”面板 


在 面板 中 设置 文本 域 的 相关 属性 , 如 图 9-9 所 示 。 
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图 9-9 设置 文本 域 的 属性 


六 指点 迷津 太 
在 文本 域 的 “属性 ”面板 中 主要 有 以 下 


参数 : 


92.3 


Name: 在 文本 框 中 为 该 文本 域 指定 
一 个 名 称 ， 每 个 文本 域 都 必须 有 一 
个 唯一 的 名 称 。 文 本 域名 称 不 能 包 
含 空格 或 特殊 字符 , 可 以 使 用 字母 、 
数字 、 字 符 和 下 画 线 (_) 的 任意 组 合 。 
所 选 名 称 最 好 与 输入 的 信息 有 关系 。 
Size: 设置 文本 域 可 显示 的 字符 宽 
度 。 
MaxLength: 设置 单行 文本 域 中 最 
多 可 输入 的 字符 数 。 使 用 “最 多 字 
符 数 ” 将 邮政 编码 限制 为 6 位 数 ， 
或 将 密码 限制 为 10 个 字符 等 。 如 果 
将 “最 多 字符 数 ” 文 本 框 保留 为 空 
白 ， 则 可 以 输入 任意 数量 的 文本 ， 
如 果 文 本 超过 字符 宽度 ， 文 本 将 滚 
动 显示 。 如 果 输 入 超过 最 大 字符 数 ， 
则 表单 产生 警告 声 。 

Pattem: 可 用 于 指定 JavaScript 正则 
表达 式 模式 以 验证 输入 。 省 略 前 导 
斜 杠 和 结尾 斜 杠 。 

List: 可 用 于 编辑 属性 检查 器 中 未 
列 出 的 属性 。 


插入 密码 域 


使 用 密码 域 输入 的 密码 及 其 他 信息 在 发 
送 到 服务 器 时 并 不 会 进行 加 密 处 理 ， 所 传输 


的 数据 可 能 会 以 字母 、 数 字 、 文 本 的 形式 被 
截获 并 被 读 取 。 因 此 ， 始 终 应 对 要 确保 安全 
的 数据 进行 加 密 。 创 建 密码 域 的 具体 操作 步 
又 如 下 : 

贺 将 光标 置 于 表格 的 第 2 行 第 1 列 中 ， 输 入 
相应 的 文字 ， 如 图 9-10 所 示 。 


Wa WE 0 i I ey 


图 9-10 输入 文字 
加 将 光标 置 于 表格 的 第 2 行 第 2 列 单元 格 中 
执行 “插入 ”| “表单 ”| “密码 ”命令 ,插入 
密码 域 ， 如 图 9-11 所 示 。 


六 高 手 支 招 女 

最 好 对 不 同 内 容 的 文本 域 进行 不 同 数量 
的 限制 , 防止 个 别 浏览 者 恶意 输入 大 量 数 据 ， 
维护 系统 的 稳定 性 。 如 用 户 名 可 以 设置 为 30 
个 字符 、 密 码 可 以 设置 为 20 个 字符 、 邮 政 
编码 可 以 设置 为 6 个 字符 等 。 


9.2.4 插入 多 行文 本 域 


如 果 希 望 创建 多 行文 本 域 ， 则 需要 使 用 文 
本 区 域 。 插 入 文本 区 域 的 具体 操作 步骤 如 下 : 


硬 将 光标 置 于 第 9 行 第 1 列 单元 格 中 ， 输 入 
相应 的 文字 ， 如 图 9-12 所 示 。 


图 9-12 输入 相应 的 文字 


醒 将 光标 置 于 第 9 行 第 2 列 单元 格 中 ,执行 “ 插 
入 ”| “表单 ”|“ 文 本 区 域 ”命令 ， 插 入 文本 
区 域 ， 如 图 9-13 所 示 。 


图 9-13 插入 文本 区 域 


友 提示 妇 
在 “表单 ”插入 栏 中 单 击 “ 文 本 区 域 ” 
按钮 口 ， 也 可 以 插入 文本 区 域 。 


三 选中 插入 的 文本 区 域 ， 打 开 “ 属 性 ”面板 ， 
在 面板 中 设置 其 属性 ， 如 图 9-14 所 示 。 


图 9-14 设置 文本 区 域 的 属性 
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9.2.5 “插入 隐藏 域 


信息 ， 该 信息 对 用 户 而 言 是 隐藏 的 。 将 光标 
和 置 于 要 插入 隐藏 域 的 位 置 ， 执 行 “ 插 入 ”|“ 表 
单 ”| “隐藏 域 ”命令 ,插入 隐藏 域 ， 如 图 9-15 
所 示 。 


图 9-15 插入 隐藏 域 


友 指点 迷津 女 
单 击 “表单 ”插入 栏 中 的 “隐藏 域 ” 握 
按钮 ， 也 可 以 插入 隐藏 域 。 


9.2.6 ”插入 复 选 框 

复 选 框 允许 用 户 在 一 组 选项 中 选择 多 个 
选项 ， 每 个 复 选 框 都 是 独立 的 ， 所 以 必须 有 
一 个 唯一 的 名 称 。 插 入 复 选 框 的 具体 操作 步 
又 如 下 : 


”入 复 选 框 ， 如 图 9-17 所 示 。 
可 以 使 用 隐藏 域 存储 并 提交 非 用 户 输入 | 


图 9-17 插入 复 选 框 


葬 选 中 复 选 框 ， 在 “属性 ”面板 中 设置 复 选 
框 的 属性 ， 如 图 9-18 所 示 。 


图 9-18 设置 复 选 框 的 “属性 ” 
页 将 光标 置 于 复 选 框 的 右边 ， 输 入 文字 “高 


级 客房 ”， 如 图 9-19 所 示 。 


国 将 光标 置 于 表格 的 第 3 行 第 1 列 单元 格 中 ， 
输入 文字 “预订 客服 类 型 ， ”, 如 图 9-16 所 示 。 


ET 


图 9-16 re 
本 将 光标 置 于 表格 的 第 3 行 第 2 列 单元 格 中 ， 


执行 “插入 ”| “表单 ”|“ 复 选 框 ”命令 , 插 
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图 9-19 输入 文字 


王将 光标 置 于 文字 的 右边 ， 插 入 其 他 的 复 先 


， 框 ， 并 输入 相应 的 文字 ， 如 图 9-20 所 示 。 


图 9-20 插入 其 他 复 选 框 


9.2.7 ”插入 单 选 按钮 

单 选 按钮 只 允许 从 多 个 选项 中 选择 一 个 
选项 。 单 选 按钮 通常 成 组 地 使 用 ， 在 同一 个 
组 中 的 所 有 单 选 按钮 必须 具有 相同 的 名 称 。 
插入 单 选 按钮 的 具体 操作 步骤 如 下 : 
三 将 光标 置 于 表格 的 第 4 行 第 1 列 单元 格 中 ， 
输入 文字 “性 别 : ”， 如 图 9-21 所 示 。 


图 9-21 输入 文字 
了 将 光标 置 于 第 4 行 第 2 列 单元 格 中 , 执行 “ 插 
入 ”|“ 表 单 ”|“ 单 选 按钮 ”命令 ， 插 入 单 选 
按钮 ， 如 图 9-22 所 示 。 


图 9-22 插入 单 选 按钮 


友 指点 迷津 女 
单 击 “ 表 单 ”插入 栏 中 的 “ 单 选 按钮 ”@ 


按钮， 也 可 以 插入 单 选 按钮 。 
三 选中 插入 的 单 选 接 包 ， 打开 “属性 ”面板 ， 


“在 属性 面板 中 设置 相关 属性 , 如 图 9-23 所 示 。 


图 9-23 设置 单 选 按 钮 的 “属性 ” 


砚 将 光标 置 于 单 选 按钮 的 右边 ， 输 入 文字 
“ 男 ”， 如 图 9-24 所 示 。 


图 9-24 输入 文字 


丁 按照 步骤 02 ~ 04 的 方法 ， 插 入 第 二 个 单 
| 移 按 乌 ， 并 输入 文字 ， 天 9-25 所 示 。 


图 9-25 插入 其 他 单 选 按 钮 
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9.2.8 ”插入 选择 框 

选择 框 使 访问 者 可 以 从 列表 中 选择 一 个 
或 多 个 项 目 。 当 空间 有 限 ， 但 需要 显示 许多 
项 目 时 ， 选 择 框 非常 有 用 。 如 果 想 要 对 返回 
给 服务 器 的 值 予 以 控制 ， 也 可 以 使 用 选择 框 。 
选择 框 与 文本 域 不 同 ， 在 文本 域 中 用 户 可 以 
随心 所 欲 地 输入 任何 信息 ， 甚 至 包括 无 效 的 
数据 ， 而 使 用 选择 框 则 可 以 设置 某 个 菜单 返 
回 的 确切 值 。 具 体操 作 步 骤 如 下 : 
贺 将 光标 置 于 表格 的 第 5 行 第 1 列 单元 格 中 ， 


图 9-26 输入 文字 
区 将 光标 置 于 表格 的 第 5 行 第 2 列 单元 格 中 ， 
执行 “插入 ”|“ 表 单 ”| “选择 ”命令 ， 揪 入 
选择 ， 如 图 9-27 所 示 。 


图 9-27 插入 选择 


六 提示 六 
单 击 “ 表 单 ”插入 栏 中 的 “选择 ”按钮 
时 ， 也 可 以 插入 选择 框 。 
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王选 中 选择 框 ， 在 “属性 ”面板 中 单 击 
列表 值 .， 按钮， 如 图 9-28 所 示 。 


Er - 


DR 


= sl 
图 9-28 单 击 “ 列 表 值 ” 按 钮 


咀 弹 出 “列表 值 ”对 话 框 ， 在 对 话 框 中 单 击 
内 按钮 添加 相应 的 内 容 ， 如 图 9-29 所 示 。 


图 9-29 


“列表 值 ”对 话 框 


冯 指点 迷津 克 
列表 /菜单 的 “属性 ”面板 中 主要 有 以 
下 参数 : 

。 Name: 在 其 文本 框 中 输入 列表 / 菜 
单 的 名 称 。 

。 Size: 设 可 用 于 指定 要 在 列表 /菜单 
中 显示 的 行 数 。 此 选项 仅 当 选择 列 
表 类 型 时 才 可 用 。 

。 ”Selected: 可 用 于 指定 用 户 是 否 可 以 
从 列表 中 一 次 选择 多 个 选项 。 仅 当 
选择 列表 类 型 时 才 可 用 。 

。 列表 值 : 单 击 此 按钮 [_ 列 村 值 .,， ]， 
弹出 “列表 值 ”对 话 框 ， 在 对 话 框 
中 向 菜单 中 添加 菜单 项 。 


西单 击 “ 确 定 ” 按 钮 ， 添 加 列表 值 ， 如 图 9-30 
所 示 。 


© Wy @ ( 
“® 
第 9 章 利用 表单 对 象 创建 表单 文件 。” 门 (C 
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| 柄 选中 插入 的 URL, 打开 属性 面板 ， 在 面板 
， 中 进行 相应 的 设置 ， 如 图 9-33 所 示 。 


| Cs 一 


图 9-30 添加 列表 值 


9.2.9 课堂 小 实例 一 插入 URL 
创建 URL 的 具体 操作 步骤 如 下 : 


_ 二 六 提示 六 
而 将 光标 置 于 表格 的 第 6 行 第 1 列 单元 格 中 ， i 
输入 文字 “相关 页 面 ，”， 如 图 9-31 所 示 。 单 击 “ 表 单 ” 插 入 栏 中 的 “URL” 按 钮 


8， 也 可 以 插入 URL。 


9.2.10 ”插入 图 像 域 


在 Dreamweaver 中 ， 可 以 使 用 指定 的 图 
像 作 为 按钮 。 如 果 使 用 图 像 来 执行 任务 而 不 
是 提交 数据 ， 则 需要 将 某 种 行为 附加 到 表单 
对 象 上 。 创建 图 像 按 钮 的 具体 操作 步骤 如 下 : 
丽 将 光标 置 于 表格 的 第 7 行 第 1 列 单元 格 中 ， 
输入 文字 ， 如 图 9-34 所 示 。 


心 


-33 设置 URL 的 属性 


DW am whe A WA Ma WA Pr MA WD me CE TIS 


图 9-31 输入 文字 


本 将 光标 置 于 第 6 行 第 2 列 单 元 格 中 ,执行 “ 插 


| 图 9-34 输入 文字 

， 酌 将 光标 置 于 表格 的 第 7 行 第 2 列 单元 格 中 ， 
执行 “插入 ” |“ 表单 ” |“ 日期” 命令， 插入 
日 期 域 ， 如 图 9.35 所 示 。 
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图 9-35 插入 日 期 域 
中 将 光标 置 于 日 期 域 的 右边 , 执行 “插入 ”|“ 表 


对 话 框 ， 选 择 图 像 源 文件 images/icon 04. 
gif， 如 图 9-36 所 示 。 


图 9-38 设置 图 像 按钮 的 属性 


9.2.11 ”插入 文件 域 
单 ”| 图 像 按 钮 ”命令 , 弹出 “选择 图 像 源 文件 ” 


利用 Dreamueawer 可 以 创建 文件 域 ， 文 


， 件 域 使 浏览 者 可 以 选择 其 计算 机 上 的 文件 ， 
”如 处 理 文档 或 图 像 文 件 ， 并 将 该 文件 上 传 到 
”服务 器 。 文 件 域 的 外 观 与 文本 域 类 似 ， 只 是 
文件 域 还 包含 一 个 “浏览 ”按钮 。 浏 览 者 可 
以 手动 输入 要 上 传 的 文件 的 路 径 ， 也 可 以 使 
用 “浏览 ”按钮 定位 并 选择 该 文件 。 具 体操 
， 作 步骤 如 下 : 

， 吏 将 光标 置 于 表格 的 第 8 行 第 1 列 单元 格 中 ， 
输入 文字 “上 传 图 片 ，”， 如 图 9-39 所 示 。 


图 9-36 


“选择 图 像 源 文件 ”对 话 框 


存单 击 “ 确 定 ” 按 钮 , 插入 图 像 按钮 , 如 图 9-37 ， 


所 示 。 


图 9-37 插入 图 像 按钮 | 
王选 中 插入 的 图 像 按钮 ， 打 开 “ 属 性 ”面板 ， 


在 面板 中 设置 相关 属性 ， 如 图 9-38 所 示 。 
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图 9-39 输入 文字 


， 咀 将 光标 置 于 第 8 行 第 2 列 单元 格 中 , 执行 插 
| 入 ”| “表单 ”|“ 文 件 ”命令 ， 揪 入 文件 域 ， 

”如 图 9-40 所 示 。 

六 提示 六 

单 击 “表单 ”插入 栏 中 的 “文件 ”按钮 
”时 ， 也 可 以 插入 文件 域 。 


图 9-40 插入 文件 域 | 图 9-42 插入 提交 按钮 


丁 选 中 插入 的 文件 域 ， 打 开 “ 属 性 ”面板 ，“” 吗 选 中 插入 的 提交 按钮 ， 打 开 “ 属 性 ”面板 ， 
在 面板 中 进行 相应 的 设置 ， 如 图 9-41 所 示 。 在 面板 中 可 以 设置 相关 属性 , 如 图 9-43 所 示 。 


ER On 


图 9-41 文件 域 的 属性 面板 图 9-43 设置 提交 按钮 的 属性 
本 将 光标 置 于 提交 按钮 右边 , 执行 “插入 "| 表 
9.2.12 插入 按钮 单 "|“ 重 置 按钮 ”命令 , 插入 重 置 按钮 , 并 在 “ 属 


按钮 控制 表单 操作 ， 使 用 表单 按钮 ， 可 ， 性 ”面板 中 设置 相关 属性 ， 如 图 9-44 所 示 。 
以 将 输入 表单 的 数据 提交 到 服务 器 ， 或 者 重 ， 醋 保存 文档 ， 完 成 表单 对 象 的 制作 。 
置 该 表单 。 

对 表单 而 言 ， 按 钮 是 非常 重要 的 ， 它 能 ， 
够 控制 对 表单 内 容 的 操作 ， 如 “提交 ”或 “ 重 
置 ”。 要 将 表单 内 容 发 送 到 远 端 服务 器 上 ， 
使 用 “提交 ”按钮 ， 要 清除 现 有 的 表单 内 容 ， 
使 用 “ 重 置 ”按钮 。 插 入 按钮 的 具体 操作 步 _ 
国 将 光标 置 于 表格 的 第 10 行 第 2 列 单元 格 中 ， 
执行 “插入 ”|“ 表 单 ”|“ 提 交 按 钮 ”命令 ， 


插入 提交 按钮 ， 如 图 9-42 所 示 。 | 图 9-44 插入 重 置 按钮 
六 指点 迷津 太 ”六 指 点 迷津 太 
单 击 “ 表 单 ” 插 入 栏 中 的 “提交 按钮 ”  ”” 单 击 “表单 ”插入 栏 中 的 “ 重 置 按钮 ” 


按钮 国 ， 也 可 以 插入 提交 按钮 。 ”按钮 全 ， 也 可 以 插入 重 置 按钮 。 
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实战 应 用 一 “制作 网 站 注册 页 面 


表单 是 网 站 的 管理 者 与 访问 者 进行 交互 的 重要 工具 ， 一 个 没有 表单 的 页 面 传递 信息 的 能 力 
是 有 限 的 ， 所 以 表单 经 常用 来 制作 用 户 登录 、 会 员 注册 及 信息 调查 等 页 面 。 


在 实际 应 用 中 ， 这 些 表单 对 象 很 少 单独 使 用 ， 


一 般 一 个 表单 中 会 有 各 种 类 型 的 表单 对 象 ， 


以 便 浏览 者 对 不 同类 型 的 问题 做 出 最 方便 、 快 捷 的 回答 。 因 此 ， 在 这 一 节 中 ， 我 们 将 会 带 着 读 


者 ,一 步 一 步 亲手 制作 一 个 完整 的 电子 邮件 表单 ， 


WEA, 


i 
二 下 载 中 心 ttm 


时 9 女 
Tm, ded dd 
由 


Ls se 


Hm LN ne aa er Wang zm i EN 


图 9-45 电子 邮件 表单 效果 


原始 文件 ， | 原始 文件 /CH09/9.3/index.htm 


最 终 文件 ， | 最 终 文件 /CH09/9.3/index1.htm 


画 打开 网 页 文档 ， 将 光标 置 于 页 面 中 ， 如 图 
9-46 所 示 。 


图 9-46 打开 网 页 文档 | 
本 执 行 “ 插 入 ”| “表单 ”| “表单 ”命令 , 插 
入 表单 ， 如 图 9-47 所 示 。 | 
王将 光标 置 于 表单 中 ,执行 “插入 ”| “表格 ” 
命令 ， 插 入 一 个 6 行 2 列 的 表格 ， 如 图 9-48 ， 
所 示 。 | 
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效果 如 图 9-45 所 示 ， 具 体 的 操作 步骤 如 下 : 


图 9-48 插入 表格 


区 将 光标 置 于 表格 的 第 1 行 第 1 列 单元 格 中 ， 
输入 相应 的 文字 ， 如 图 9-49 所 示 。 


图 9-49 输入 文字 


三 将 光标 置 于 表格 的 第 1 行 第 2 列 单元 格 中 ， | 
执行 “插入 ”|“ 表 单 ”|“ 文 本 ”命令 , 插入 
文本 域 ， 如 图 9-50 所 示 。 | 


图 9-50 插入 文本 域 


喇 将 光标 置 于 表格 的 第 2 行 第 1 列 单元 格 中 ， 
输入 相应 的 文字 ， 如 图 9-51 所 示 。 


图 9-51 输入 文字 


贺 将 光标 置 于 表格 的 第 2 行 第 2 列 单元 格 中 ， 
执行 “插入 ”|“ 表 单 ”|“Tel” 命 令 , 插入 Tel 域 ， 
如 图 9-52 所 示 。 


el 
Be 
Ee 


图 9-52 插入 Tel 域 
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三 将 光标 置 于 表格 的 第 3 行 第 1 列 单元 格 中 ， 
输入 相应 的 文字 ， 如 图 9-53 所 示 。 


图 9-53 输入 文字 


' 本 将 光标 置 于 表格 的 第 3 行 第 2 列 单元 格 中 ， 
,执行 “插入 ”| “表单 ”|“ 单 选 按钮 ”命令 ， 
“插入 单 选 按钮 ， 如 图 9-54 所 示 。 


[Dm zn hs sn ws me wt 0 ny wo wm 


图 9-54 插入 单 选 按钮 


而 将 光标 置 于 单 选 按钮 的 右边 ， 输 入 相应 的 
文字 ， 如 图 9-55 所 示 。 


图 9-55 输入 文字 
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面 将 光标 置 于 文字 的 右边 ， 插 入 其 他 单 选 按 
钮 ， 并 输入 相应 的 文字 ， 如 图 9-56 所 示 。 


| 融 将 光标 置 于 复 选 框 的 右边 ， 输 入 相应 的 文 
， 字 ， 如 图 9-59 所 示 。 


图 9-56 插入 其 他 单 选 按钮 


醒 将 光标 置 于 表格 的 第 4 行 第 1 列 单元 格 中 ， 
输入 相应 的 文字 ， 如 图 9-57 所 示 。 


图 9-57 输入 文字 


鲍 将 光标 置 于 表格 的 第 4 行 第 2 列 单元 格 中 ， 
执行 “插入 ”|“ 表 单 ”|“ 复 选 框 ”命令 ， 插 
入 复 选 框 ， 如 图 9-58 所 示 。 
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图 9-58 插入 复 选 框 
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图 9-59 输入 文字 


， 葬 将 光标 置 于 文字 的 右边 ， 插 入 其 他 的 复 先 
， 框 ， 并 输入 相应 的 文字 ， 如 图 9-60 所 示 。 
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图 9-60 插入 其 他 复 选 框 


醒 将 光标 置 于 表格 的 第 5 行 第 1 列 单元 格 中 ， 
”输入 相应 的 文字 ， 如 图 9-61 所 示 。 
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图 9-61 输入 文字 


面 将 光标 置 于 表格 的 第 5 行 第 2 列 单元 格 中 ， 
执行 “插入 ”|“ 表 单 ”|“ 文 本 区 域 ”命令 ， 
插入 文本 区 域 ， 如 图 9-62 所 示 。 


图 9-62 插入 文本 区 域 


酌 选中 插入 的 文本 区 域 ， 打 开 “ 属 性 ”面板 
在 属性 面板 中 设置 相关 属性 , 如 图 9-63 所 示 。 
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图 9-63 设置 文本 区 域 


苯 将 光标 置 于 表格 的 第 7 行 第 2 列 单元 格 中 ， 
执行 “插入 ”|“ 表 单 ”|“ 提 交 按 钮 ”命令 ， 


本 章 小 结 


第 9 章 ”利用 表单 对 象 创建 表单 文件 


| 插入 提交 按钮 ， 如 图 9-64 所 示 。 


图 9-64 插入 提交 按钮 


而 将 光标 置 于 提交 按钮 的 右边 ， 执 行 “ 插 
入 ”|“ 表 单 ”|“ 重 置 按钮 ”命令 , 插入 重 置 按钮 ， 
并 在 “属性 ”面板 中 设置 相关 属性 ， 如 图 9-65 
所 示 。 

到 保存 文档 ， 完 成 表单 对 象 的 制作 ， 效 果 如 
图 9-45 所 示 。 
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图 9-65 输入 文字 


可 以 使 用 Dreamweaver 创建 文本 域 、 密 码 域 、 单 选 按钮 、 复 选 框 、 按 钮 以 及 其 他 表单 对 象 。 


表单 主要 用 来 得 到 用 户 的 反馈 信息 ， 如 进行 会 员 注册 、 网 上 调查 、 信 息 反馈 等 。 当 访问 者 在 表 
单 中 输入 信息 ， 单 击 提交 按钮 时 ， 这 些 信 息 将 被 发 送 到 服务 器 ， 服 务 器 端 脚本 或 应 用 程序 再 对 
这 些 信 息 进 行 处 理 。 如 用 户 在 线 填 写 反 馈 信息 提交 后 ， 该 用 户 反馈 信息 内 容 将 通过 服务 器 反馈 
给 我 们 ， 这 就 是 一 个 表单 提交 和 反馈 的 过 程 。 


上 人 


第 了 OO 章 用 表格 排版 网 页 


表格 是 网 页 布局 设计 的 常用 工具 ， 表 格 在 网 页 中 不 仅 可 以 用 来 排列 数据 ， 而 且 可 以 对 页 


面 
中 的 图 像 、 文 本 等 元 素 进行 准确 的 定位 ， 使 得 页 面 在 形式 上 既 丰 富 多 彩 ， 又 富有 条 理 ， 从 而 也 
使 页 面 显得 更 加 整齐 有 序 。 使 用 表格 排版 的 页 面 在 不 同 平 台 、 不 同 分 辩 率 的 浏览 器 中 都 能 保持 


原 有 的 布局 ， 所 以 表格 是 网 页 布局 中 最 常用 的 工具 。 本 章 主要 讲述 表格 的 创建 、 表 格 属性 的 设 
置 、 表 格 的 基本 操作 、 表 格 的 排序 和 导入 表格 式 数据 等 。 


全 插入 表格 多 ”导入 表格 式 数据 及 排序 整理 表格 内 容 
令 ”设置 表格 属性 全 ”利用 表格 排版 页 面 
令 ”表格 的 基本 操作 令 ”网 页 圆 角 表 格 的 制作 


四 本 在 网 页 中 插入 表格 
表格 由 行 、 列 和 单元 格 3 部 分 组 成 。 行 贯穿 表格 的 左右 ， 列 则 是 上 下 方式 的 。 单 元 格 是 行 
和 列 交 汇 的 部 分 ， 用 来 输入 信息 。 单 元 格 会 自动 扩展 到 输入 信息 相 适 应 的 尺寸 。 
10.1.1 插入 表格 
在 Dreamweaver 中 , 表格 可 以 用 于 制作 简单 的 图 表 , 还 可 以 用 于 安排 网 页 文档 的 整体 布局 。 
在 网 页 中 插入 表格 的 方法 非常 简单 ， 具 体操 作 步 又 如 下 : 
国 打开 网 页 文档 ， 如 图 10-1 所 示 。 
覃 执行 “插入 ”| “表格 ”命令 ， 如 图 10-2 所 示 。 
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图 10-1 打开 网 页 文档 图 10-2 执行 “表格 ”命令 


03 弹出 “表格 ”对 话 框 , 在 对 话 框 中 将 “ 行 数 ” 
设置 为 3、“ 列 ”设置 为 2、“ 表 格 宽度 ” 设 
置 为 70%， 如 图 10-3 所 示 。 


图 10-3 “表格 ”对 话 框 

友 提示 女 

在 “表格 ”对 话 框 中 可 以 进行 如 下 设置: 

。 “ 行 数 ”: 在 文本 框 中 输入 新 建 表 
格 的 行 数 。 

。 “ 列 ”: 在 文本 框 中 输入 新 建 表格 
的 列 数 。 

。 “表格 宽度 ”: 用 于 设置 表格 的 宽 
度 ， 其 中 右边 的 下 拉 列 表 中 包含 百 
分 比 和 像素 两 种 单位 。 

。 “边框 粗细 ”: 用 于 设置 表格 边框 
的 宽度 ， 如 果 将 其 设置 为 0， 在 浏 
览 时 则 看 不 到 表格 的 边框 。 

。 “单元 格 边 距 ”: 用 于 设置 单元 格 
内 容 和 单元 格 边界 之 间 的 像素 数 。 

。 “单元 格 间距 ”: 用 于 设置 单元 格 
之 间 的 像素 数 。 

。 “标题 ”: 可 以 定义 表 头 样式 ，4 
种 样式 可 以 任 选 一 种 ， 用 来 定义 表 
格 标题 的 对 齐 方式 。 

。 “标题 ”: 定义 表格 的 标题 。 

。 “摘要 ”: 用 来 对 表格 进行 注释 。 


04 单 击 “确定 ”按钮 ， 插 入 表格 ， 如 图 10-4 
所 示 。 


图 10-4 插入 表格 


10.1.2 ”添加 内 容 到 单元 格 

表格 建立 以 后 ， 就 可 以 向 表格 中 添加 各 种 
元 素 了 ， 如 文本 、 图 像 、 表 格 等 。 在 表格 中 添 
加 文本 就 同 在 文档 中 操作 一 样 ， 除 了 直接 输入 
文本 , 还 可 以 先 利用 其 他 文本 编辑 器 编辑 文本 ， 
然后 将 文本 复制 到 表格 里 ， 这 也 是 在 文档 中 添 
加 文本 的 一 种 简洁 而 快速 的 方法 。 

在 单元 格 中 插入 图 像 时 ， 如 果 单元 格 的 
尺寸 小 于 插入 图 像 的 尺寸 ， 则 插入 图 像 后 ， 
单元 格 的 尺寸 自动 增高 或 者 增 宽 。 将 光标 置 
于 单元 格 中 ， 然 后 在 每 个 单元 格 中 分 别 输入 
相应 的 文字 ， 如 图 10-5 所 示 。 


图 10-5 输入 文字 


友 提示 友 

怎样 才能 将 在 800X 600 的 分 辩 率 下 生 
成 的 网 页 在 1024X768 下 居中 显示 ? 

把 页 面 内容 放 在 一 个 宽 为 778 的 大 表格 
中 ， 把 大 表格 的 对 齐 方式 设置 为 居中 对 齐 。 
宽度 定 为 778 是 为 了 在 800X 600 的 分 辨 率 下 


窗口 不 出 现 水 平 滚动 条 ， 也 可 以 根据 需要 进 
行 调整 。 如 果 要 加 快 关键 内 容 的 显示 ， 也 可 
以 把 内 容 拆 开放 在 几 个 竖 向 相连 的 大 表格 中 。 
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10.2 


设置 表格 属性 


创建 完 表 格 后 可 以 根据 实际 需要 对 表格 的 属性 进行 设置 ， 如 宽度 、 边 框 、 对 齐 方式 等 ， 也 
可 只 对 某 些 单元 格 进行 设置 。 


10.2:1 


设置 单元 格 属性 


将 光标 置 于 单元 格 中 ， 该 单元 格 就 处 于 选 
中 状态 ， 此 时 “属性 ”面板 中 显示 出 所 有 人 允许 
设置 的 单元 格 属性 的 选项 ， 如 图 10-6 所 示 。 


图 10-6 设置 单元 格 属性 


在 单元 格 “ 属 性 ”面板 中 可 以 设置 以 下 


参数 : 


10.2:2 


“水 平 ”: 设置 单元 格 中 对 象 的 对 齐 
方式 ,“ 水 平 ” 下 拉 列 表 框 中 包含 “ 默 
认 ”、“ 左 对 齐 ”、“ 居 中 对 齐 ” 和 
“ 右 对 齐 ”4 个 选项 。 

“垂直 ”: 也 是 设置 单元 格 中 对 象 的 
对 齐 方式 ， “垂直 ”下 拉 列 表 框 中 包 
含 “ 默 认 ”、“ 顶 端 ”、“ 居 中 ”、 
“底部 ”和 “基线 ”5 个 选项 。 

“ 宽 ” 和 “高 ”: 用 于 设置 单元 格 的 
宽 与 高 。 

“不 换行 ”: 表示 单元 格 的 宽度 将 随 
文字 长 度 的 不 断 增加 而 加 长 。 
“标题 ” 将 当前 单元 格 设置 为 标题 行 。 
“背景 颜色 ”用 于 设置 单元 格 的 颜色 。 
“页 面 属性 ”设置 单元 格 的 页 面 属性 。 


设置 表格 属性 


设置 表格 属性 之 前 首先 要 选中 表格 ， 在 
“属性 ”面板 中 将 显示 表格 的 属性 ， 并 进行 
相应 的 设置 ， 如 图 10-7 所 示 。 
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图 10-7 设置 表格 属性 


表格 “属性 ”面板 参数 如 下 : 


“表格 ”: 用 于 输入 表格 的 名 称 。 
“ 行 ” 和 “Cols”: 输入 表格 的 行 数 
和 列 数 。 

“ 宽 ”: 输入 表格 的 宽度 ， 其 单位 可 
以 是 “像素 ”或 “百分比 ”。 

> “像素 ”: 选择 该 选项 ， 表 明 该 
表格 的 宽度 值 是 像素 值 。 这 时 表 
格 的 宽度 是 绝对 宽度 ， 不 随 浏览 
器 窗口 的 变化 而 变化 。 

“百分比 ”: 选择 该 选项 ， 表 明 
该 表格 的 宽度 值 是 表格 宽度 与 济 
览 器 窗口 宽度 的 百分比 数值 。 这 
时 表格 的 宽度 是 相对 宽度 ， 会 随 
着 浏览 器 窗口 大 小 的 变化 而 变化 。 
“CellPad”: 设置 单元 格 内 容 和 单 
元 格 边界 之 间 的 像素 数 。 
“CellSpace”: 设置 相 邻 的 表格 单元 
格 间 的 像素 数 。 

“Align”: 设置 表格 的 对 齐 方 式 ， 
有 “默认 ”、“ 左 对 齐 ”、“ 居 中 对 
齐 ” 和 “ 右 对 齐 ”4 个 选项 。 
“Border” 用 来 设置 表格 边框 的 宽度 。 
总 用 于 清除 列 宽 。 

名 用 于 将 表格 宽 由 百分比 转 为 像素 。 
名 用 于 将 表格 宽 由 像素 转换 为 百分比 。 
名 用 于 清除 行 高 。 


Vv 


表格 的 基本 操作 


创建 了 表格 后 ， 用 户 要 根据 网 页 设置 的 需要 对 表格 进行 处 理 ， 例 如 选择 表格 、 调 整 表格 和 
单元 格 的 大 小 、 添 加 或 删除 行 或 列 、 拆 分 单元 格 及 合并 单元 格 等 ， 熟 练 掌握 表格 的 基本 操作 ， 


可 以 提高 制作 网 页 速度 。 
10.3.1 选 定 表格 


要 想 对 表格 进行 编辑 ， 那 么 首先 选择 它 ， 
主要 有 以 下 5 种 方法 选取 整个 表格 。 

。 ”将 光标 置 于 表格 的 左上 角 ， 按 住 鼠标 
的 左 键 不 放 ， 拖 动 鼠标 指针 到 表格 的 
右 下 角 , 将 整个 表格 中 的 单元 格 选 中 ， 
单 击 鼠 标的 右键 ， 在 弹出 的 快捷 菜单 
中 选择 “表格 ”|“ 选 择 表格 ”命令 ， 
如 图 10-8 所 示 。 


图 10-8 执行 “选择 表格 ”命令 


。 单 击 表格 边框 线 的 任意 位 置 ， 即 可 选 
中 表格 ， 如 图 10-9 所 示 。 


图 10-9 单 击 表格 边框 线 
。 将 光标 置 于 表格 内 的 任意 位 置 ， 执 行 


“修改 ” |“ 表格”| “选择 表格 ”命令 ， 
如 图 10-10 所 示 。 


全 0 0 3 wn 


图 10-10 执行 “选择 表格 ”命令 


。 ”将 光标 置 于 表格 内 的 任意 位 置 ， 单 击 
文档 窗口 左下 角 的 <table> 标签 ， 如 
图 10-11 所 示 。 


图 10-11 单 击 <table> 标签 


10.3.2 ”添加 行 或 列 
可 以 执行 “修改 六 表格 "菜单 中 的 子 命令 ， 
增加 或 减少 行 与 列 。 增 加 行 与 列 可 以 用 以 下 
方法 : 
。 ”将 光标 置 于 相应 的 单元 格 中 ,执行 “ 修 
改 ”| “表格 ”|“ 插 入行” 命令 ， 即 
可 插入 一 行 。 
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。 将 光标 置 于 相应 的 位 置 ， 执 行 “ 修 
改 ”|“ 表 格 ”|“ 插 入 列 ” 命 令 ， 即 
可 在 相应 的 位 置 插入 一 列 。 

。 将 光标 置 于 相应 的 位 置 ， 执 行 “ 修 
改 ”|“ 表 格 ”|“ 插 入 行 或 列 ” 命 令 ， 
弹出 “插入 行 或 列 ” 对 话 框 ， 在 对 话 
框 中 进行 相应 的 设置 ， 如 图 10-12 所 
示 。 单 击 “ 确 定 ” 按 钮 ， 即 可 在 相应 
的 位 置 插入 行 或 列 ， 如 图 10-13 所 示 。 


友 提示 女 
在 “插入 行 或 列 ” 对 话 框 中 可 以 进行 如 
下 设置 : 

。 插入 : 包含 “ 行 ” 和“ 列 ”两 个 单 
选 按钮 ， 一 次 只 能 选择 其 中 一 个 来 
插入 。 该 选项 组 的 初始 状态 选择 的 
是 “ 行 ” 单 选 按钮 ， 所 以 下 面 的 选 
项 就 是 “ 行 数 ”。 如 果 选 择 的 是 “ 列 ” 
单 选 按 钮 ， 那 么 下 面 的 选项 就 变 成 
了 “ 列 数 ”， 在 “ 列 数 ”文本 框 内 
可 以 直接 输入 要 插入 的 列 数 。 

。 位 置 包含 “所 选 之 上 ”和 “所 选 
之 下 ”两 个 单 选 按 钮 。 如 果 “ 插 入 ” 
选项 选择 的 是 “ 列 ” 单 选 按钮 ， 那 
么 “位 置 ” 选 项 后 面 的 两 个 单 选 按 
钮 就 会 变 成 “在 当前 列 之 前 ”和 “在 
当前 列 之 后 ”。 


图 10-12 “插入 行 或 列 ” 对 话 框 
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图 10-13 插入 行 


10.3.3 ”删除 行 或 列 

删除 行 或 列 有 以 下 几 种 方法 : 

。 ”将 光标 置 于 要 删除 行 或 列 的 位 置 ， 执 
行 “修改”|“ 表 格 ”| “删除 行 ”命令 ， 
或 执行 “修改 ” |“ 表格 ” |“ 删除 列 ” 
命令 ， 即 可 删除 行 或 列 ， 如 图 10-14 
所 示 。 

。 选中 要 删除 的 行 或 列 ， 执 行 “ 编 
辑 ”| 清除” 命令， 即 可 删除 行 或 列 。 

。 ”选中 要 删除 的 行 或 列 ， 按 Delete 键 
或 按 BackSpace 键 也 可 删除 行 或 列 。 


图 10-14 删除 行 


10.3.4 ”合并 单元 格 

合并 单元 格 就 是 将 选中 表格 单元 格 中 的 
内 容 合 并 到 一 个 单元 格 。 合 并 单元 格 ， 首 先 
将 准备 合并 的 单元 格 选中 ， 然 后 执行 “ 修 
改 ”| “表格 ”| “合并 单元 格 ” 命 令 ， 如 图 
10-15 所 示 , 将 多 个 单元 格 合并 成 一 个 单元 格 。 


或 选中 单元 格 后 单 击 鼠 标 右键 ， 在 弹出 的 快 
捷 菜 单 中 选择 “表格 ”| “合并 单元 格 ” 命 令 ， 
将 多 个 单元 格 合并 成 一 个 单元 格 ， 如 图 10-16 
所 示 。 


图 10-18 拆 分 单元 格 


10.3.6 ”调整 表格 大 小 
用 “属性 ”面板 中 的 “ 宽 ” 和 “高 ” 数 

值 框 能 精确 地 调整 表格 的 大 小 ， 而 用 鼠标 拖 
友 提示 女 动 调 整 则 显得 更 为 方便 快捷 ， 利 用 鼠标 调整 
单 击 “ 属 性 ”面板 中 的 “合并 所 选单 元 格 ， ”表格 大 小 有 3 种 方法 。 

使 用 跨度 ”按钮 口 ， 也 可 以 合并 单元 格 ， 它 。 ”调整 表格 的 宽 ， 选 中 整个 表格 ， 将 光 


图 10-16 合并 单元 格 


往往 是 创建 复杂 表格 的 重要 步骤 。 标 置 于 表格 右边 框 控制 点 引 上 ， 当 光 

标 变 成 双 箭头 4 才 时 , 如 图 10-19 所 示 ， 

10.3.5” 拆 分 单元 格 拖 动 鼠 标 即 可 调整 表格 整体 宽度 ， 调 
在 使 用 表格 的 过 程 中 ， 有 时 需要 拆 分 单 整 后 如 图 10-20 所 示 。 


He eo Em I em 


元 格 以 达到 自己 所 需 的 效果 。 拆 分 单元 格 就 
是 将 选中 的 表格 单元 格 拆 分 为 多 行 或 多 列 ， 
具体 操作 步骤 如 下 : 

而 将 光标 置 于 要 拆 分 的 单元 格 中 ， 执 行 “ 修 
改 ”|“ 表 格 ”|“ 拆 分 单元 格 ” 命 令 ， 弹 出 “ 拆 
分 单元 格 ” 对 话 框 ， 如 图 10-17 所 示 。 

本 在 对 话 框 的 “把 单元 格 拆 分 ”选项 组 中 选 
择 “ 列 ” 单 选 按钮 ， 将 “ 列 数 ”设置 为 4， 单 i i 
击 “ 确 定 ” 按 钮 ， 即 可 将 单元 格 拆 分 ， 如 图 ， 图 10-19 调整 表格 的 宽 
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了 78 


整体 高 度 和 宽度 ,各 列 会 被 均匀 调整 ， 
调整 后 如 图 10-24 所 示 。 


友 指点 迷津 女 

使 用 布局 表格 排版 时 应 注意 什么 ? 

在 Dreamweaver 中 有 一 个 非常 重要 的 
功能 ， 即 利用 布局 模式 来 给 网 页 排版 。 在 
布局 模式 下 ， 可 以 在 网 页 中 直接 拖 出 表格 

和 aa 与 单元 格 ， 还 可 以 自由 拖 动 。 利 用 布局 模 
图 10-20 调整 表格 的 宽 后 式 对 网 页 定位 非常 方便 ， 但 生成 的 表格 比 


较 复杂 ， 不 适合 大 型 网 站 使 用 ， 一 般 只 应 
调整 表格 的 高 ， 选 中 整个 表格 ， 将 光 。 用 于 中 小 型 网 站 。 


标 置 于 表格 低 边框 控制 点 :上 ， 当 
光标 变 成 双 箭 头 恋 时， 如 图 10-21 所 Ekle 
示 , 拖 动 鼠标 即 可 调整 表格 整体 高 度 ， 
调整 后 如 图 10-22 所 示 。 


图 10-23 调整 表格 的 宽 和 高 


ND me en Hor ls WW ee 


图 10-24 整体 调整 表格 后 


10.3.7 ”调整 单元 格 大 小 


图 10-22 调整 表格 高 后 将 光标 置 于 要 设置 大 小 的 单元 格 中 ， 用 
同时 调整 表 宽 和 高 ， 选 中 整个 表格 ， “属性 ”面板 中 的 “ 宽 ” 和 “高 ”数值 框 能 
将 光标 置 于 表格 右 下 角 的 控制 点 精确 地 调整 单元 格 的 大 小 ， 而 用 鼠标 拖 动 调 
上 。， 当 光标 变 成 双 箭头 轰 时 ， 如 图 ， 整 则 显得 更 为 方便 快捷 ， 用 鼠标 调整 单元 格 
10-23 所 示 ， 拖 动 鼠标 即 可 调整 表格 。 六 小 有 两 各 方法。 


0 ceoe YY 
《 
第 10 章 用 表格 排版 网 页 ee 
。 调整 列 宽 : 将 光标 置 于 表格 右边 的 边框 上 ， 当 鼠标 变 成 为 时 ， 拖 动 鼠 标 即 可 调整 最 


后 一 列 单元 格 的 宽度 ， 如 图 10-25 所 示 ， 调 整 后 的 效果 如 图 10-26 所 示 。 同 时 也 可 以 
调整 某 一 行 表格 的 宽度 ， 对 于 其 他 的 行 不 影响 。 将 光标 置 于 表格 中 间 列 边框 上 ， 当 鼠 


图 10-25 调整 列 宽 图 10-26 调整 列 宽 后 


。 调整 行 高 : 将 光标 置 于 表格 底部 边框 或 者 中 间 行 线 上 ， 当 光标 变 成 专 时 ， 拖 动 鼠 标 即 
可 调整 此 位 置 上 面 一 行 单元 格 的 高 度 ， 如 图 10-27 所 示 ， 对 于 其 他 的 行 不 影响 ， 调 整 
行 高 后 如 图 10-28 所 示 。 


图 10-27 调整 行 高 图 10-28 调整 行 高 后 
”表格 的 其 他 功能 


为 了 更 加 快速 而 有 效 地 处 理 网 页 中 的 表格 和 内 容 , Dreamweaver CC 提供 了 多 种 自动 处 理 功能 ， 
包括 导入 表格 数据 和 排序 表格 等 。 本 节 将 介绍 表格 自动 化 处 理 技巧 ， 以 提升 网 页 表格 的 设计 技能 。 


10.4.1 导入 表格 式 数 据 


Dreamweaver 中 导入 表格 式 数据 功能 能 够 根据 素材 来 源 的 结构 ， 为 网 页 自动 建立 相应 的 表 
格 ， 并 自动 生成 表格 数据 ， 因 此 ， 当 遇 到 大 篇 幅 的 表格 内 容 编 排 ， 而 手头 又 拥有 相关 表格 式 素 
材 时 ， 便 可 使 网 页 编排 工作 轻松 得 多 。 

下 面 通过 实例 讲述 如 何 导 入 表格 式 数据 ， 效 果 如 图 10-29 所 示 ， 具 体操 作 步骤 如 下 : 


原始 文件 : 原始 文件 /CH10/10.4.1/index.html 
最 终 文件 : 最 终 文 件 /CH10/10.4.1/index1.html 


二 


图 10-29 导入 表格 式 数据 效果 


夯 打开 网 页 文档 ， 将 光标 置 于 要 导入 表格 式 
数据 的 位 置 ， 如 图 10-30 所 示 。 


ET TT 


图 10-30 打开 网 页 文档 


项 执 行 “ 文 件 " |“ 导 入 ”|“ 导 入 表格 式 数据 ” 
命令 ， 弹 出 “导入 表格 式 数据 ”对 话 框 ， 在 
对 话 框 中 单 击 “ 数 据 文件 ”文本 框 右边 的 “ 浏 
览 ” 按 钮 ， 如 图 10-31 所 示 。 


导入 表格 式 数据 


数据 文件 ; 
定 界 符 - 


Tab = 


表格 高 度 : 可 匹配 内 容 


日 设 加 为:[ [百分比 -] 


单元 格 边 距 : 3 格式 化 首 行 :| [无 格式 ] 9 


单元 格 间距 : 2 边框 : 1 


“导入 表格 式 数据 ”对 话 杠 


图 10-31 
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友 提 示 友 
| 在 “导入 表格 式 数据 ”对 话 框 中 可 以 进 
， 行 如 下 设置 : 
数据 文件 ， 输入 要 导入 的 数据 文件 
的 保存 路 径 和 文件 名 。 或 单 击 右 边 
的 “浏览 ”按钮 进行 选择 。 
定 界 符 : 选择 定 界 符 ， 使 之 与 导入 
的 数据 文件 格式 匹配 。 有 “Tab”、 
pl ne a 
他 ”5 个 选项 。 
表格 宽度 : 设置 导入 表格 的 宽度 。 
> 匹配 内 容 : 选中 此 单 选 按钮 ， 创 
建 一 个 根据 最 长 文件 进行 调整 的 
表格 。 
> 设置 为 : 选中 此 单 选 按 钮 ， 在 后 
面 的 文本 框 中 输入 表格 的 宽度 ， 
并 设置 其 单位 。 
单元 格 边 距 : 设置 单元 格 内 容 和 单 
元 格 边界 之 间 的 像素 数 。 
单元 格 间距 : 设置 相 邻 的 表格 单元 
格 间 的 像素 数 。 
格式 化 首 行 : 设置 首 行 标题 的 格式 。 
边框 ， 以 像素 为 单位 设置 表格 边框 
的 宽度 。 
酌 弹 出 “打开 ”对 话 框 ， 在 对 话 框 中 选择 数 
据 文件 ， 如 图 10-32 所 示 。 


” 国库 已 国 " 


修改 FE 期 上 
2014/10/29 1646 = ; 
2014/10/29 16598 


EEEETT 


EO 
名: 。 家 二 允 村 Gt 
文件 类 型 0): [所 文件 多 改 


图 10-32 “打开 ”对 话 框 


了 酌 单 击 “ 打 开 ” 按 钮 ， 将 文件 名 和 路 径 添加 
”到 文本 框 中 ， 在 “导入 表格 式 数据 ”对 话 框 


中 的 “ 定 界 符 ” 下 拉 表 中 选择 “ 逗 点 ”选项 ， 
在 “表格 宽度 ”选项 组 中 选中 “匹配 内 容 ” 
单 选 按钮 ， 如 图 10-33 所 示 。 


图 10-33 “导入 表格 式 数据 ”对 话 框 


西单 击 “ 确 定 ” 按 钮 ， 导 入 表格 式 数据 ， 如 
图 10-34 所 示 。 


太 提 示 友 
在 导入 数据 表格 时 注意 定 界 符 必须 是 喜 
号 ， 否 则 可 能 会 造成 表格 格式 的 混乱 。 


图 10-35 排序 表格 效果 
丽 打开 网 页 文档 ， 如 图 10-36 所 示 。 


CE 


图 10-34 导入 表格 式 数 据 


酌 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 10-29 所 示 。 


10.4.2 ”排序 表格 


排序 表格 的 主要 功能 针对 具有 格式 数据 ， 


的 表格 而 言 ， 是 根据 表格 列表 中 的 数据 来 排 
序 的 。 下 面 通过 实例 讲述 排序 表格 的 操作 ， 
效果 如 图 10-35 所 示 ， 具 体操 作 步 骤 如 下 : 
原始 文件 “| 原始 文件 /CHIO/10.4.2/index html 
最 终 文件 “| 最终 文件 /CH10/10.4.2/index1.html 


图 10-36 打开 网 页 文档 


荀 执行“ 命令 ”| “排序 表 格 ”命令 , 弹出 “ 排 
序 表格 ”对 话 框 ， 在 对 话 框 中 将 “排序 按 ” 
设置 为 “ 列 4”，“ 顺 序 ” 设 置 为 “ 按 数 字 顺 
序 ”, 在 右边 的 下 拉 列 表 中 选择 “降序 ”选项 ， 
如 图 10-37 所 示 。 


ee 


选 硕 目 排序 包含 第 一 行 
日 排序 标本 和 
吾 撞 Frp 行 
已 完成 排序 后 所 有 行商 色 保 持 不 灾 


图 10-37 “排序 表格 ”对 话 框 
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六 提示 六 

在 “排序 表格 ”对 话 框 中 可 以 设置 如 下 选项 : 

。 排序 按 : 确定 哪 一 列 的 值 将 用 于 表格 排序 。 

。 顺序 : 确定 是 按 字 母 还 是 按 数 字 顺 序 ， 以 及 是 升序 还 是 降序 对 表格 排序 。 

。 再 按 : 确定 在 不 同 列 上 第 二 种 排列 方法 的 排列 顺序 。 在 其 后 面 的 下 拉 列 表 中 指定 应 
用 第 二 种 排列 方法 的 列 ， 在 后 面 的 下 拉 列 表 中 指定 第 二 种 排序 方法 的 排序 顺序 。 


。 ”排序 包含 第 一 行 ， 指 定 表格 的 第 一 行 应 该 包括 在 排序 中 。 

。 ”排序 标题 行 ， 指 定 使 用 与 body 行 相同 的 条 件 对 表格 thead 部 分 中 的 所 有 行 排序 。 

。 ”排序 脚注 行 :指定 使 用 与 body 行 相同 的 条 件 对 表格 tfoot 部 分 中 的 所 有 行 排序 。 

。 ”完成 排序 后 所 有 行 颜色 保持 不 变 ， 指 定 排序 之 后 表格 行 属性 应 该 与 同一 内 容 保 持 关 

联 。 
砚 单 击 “ 确 定 ” 按 钮 ， 对 表格 进行 排序 ， 参 见 图 10-38 所 示 。 

DW Xn mt) BV AD mM RO) Src) als) TW mm- Ch oIolx 
ee 如。 4 到 8 加 sasa 
| 从 : 


要 

1 、 考 村 上 市 场 认 直人 志学 站，5 年 以 上 党 和 i 
二 权利 二 认 二 作 全 式 , 峙 如 井 人 和 的 寺 作 ! 5、 时 C55 | 
关系 1 4， 有 
| 


HEE 力 加 玫 科 而 EE 
1 19-r 尖 内 性 2 有 于 任 避 夺 芝 ， 计 工作 认 二 后 
入 相 区 妹 ， 其 有 有 一 完 的 代表作 经 只 寿 代 二 《未 观 代 于 者 
Sf 

1 二 关 以 上 下 旦 、 化 学 世 生 们 和 以 上 学 万 <、 让 旺 生 产 了 
让 诗作 名 工 作 扣 旷 有 商量 化 页 古书 ; 4、 具有 相 389 
a 


AM Cr OD A Cr OD dhe Or) DT 日 司 c05+ 


图 10-38 对 表格 进行 排序 
哎 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 参 见 图 10-35 所 示 。 


综合 实战 


表格 最 基本 的 作用 就 是 让 复杂 的 数据 变 得 更 有 条 理 ， 让 人 容易 看 懂 ， 在 设计 页 面 时 ， 往 往 
会 利用 表格 来 布局 定位 网 页 元 素 。 下 面 通过 两 个 实例 掌握 表格 的 使 用 方法 。 
实战 1 一 一 利用 表格 排版 页 面 

表格 在 网 页 布局 中 的 作用 是 无 处 不 在 的 ， 无 论 是 使 用 简单 的 静态 网 页 还 是 具有 动态 功能 的 
网 页 ， 都 要 使 用 表格 进行 排版 。 本 例 就 是 通过 表格 布局 网 页 的 ， 效 果 如 图 10-39 所 示 ， 操 作 步 
又 如 下 : 


[最 终 文件 : | 最 终 文件 /CH10/ 实战 1/indexl htm | 
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图 10-39 利用 表格 布局 网 页 效果 


三 执行 “文件 ”| “新建 ” 命 令 ， 弹 出 “新 
建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “空白 
页 ”|“HTML” | “无” 选项， 如 图 10-40 所 示 。 


第 10 音 ”用 表格 排版 网 页 


| 攀 执 行 “ 文 件 ”| “另存 为 ”对 话 框 , 弹出 “ 另 


存 为 ”对 话 框 ， 在 对 话 框 的 名 称 文本 框 中 输 
入 名 称 ， 如 图 10-42 所 示 。 


泵 单 击 “确定 ”按钮 ， 保 存 文档 ， 将 光标 置 
于 页 面 中 ,执行 “修改 ”|“ 页 面 属性 ”命令 ， 
弹出 “页 面 属性 ”对 话 框 ， 在 对 话 框 中 将 “上 
边 距 ”、“ 下 边 距 ”、“ 右 边 距 ”和 “左边 距 ” 
设置 为 0， 如 图 10-43 所 示 。 


Hm is) 
和 - 


] TENA) 


区 单 击 “ 确 定 ” 按 钮 ， 创 建文 档 ， 如 图 
10-41 所 示 。 


[EEC 
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图 10-41 创建 文档 


图 10-43 设置 表格 属性 


西单 击 “ 确 定 ” 按 钮 ， 修 改 页 面 属性 ， 将 光 
标 置 于 页 面 中 ,执行 “插入 ”|“ 表 格 ”命令 ， 

弹出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 
设置 为 4、“ 列 ”设置 为 1、“ 表 格 宽度 ” 设 
置 为 1003 像素 ， 如 图 10-44 所 示 。 


3 


己 玫 十 己 声 二 


图 10-44 “表格 ”对 话 框 


123 


丁 单 击 “ 确 定 ” 按 钮 ， 插 入 表格 ， 此 表格 记 ， 
， 像 images/ban.jpg， 如 图 10-48 所 示 。 


为 表格 1， 如 图 10-45 所 示 。 


行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ”命令 ， 插 入 图 


TI 
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me le eA 
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图 10-45 插入 表格 1 


叮 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 执 
行 “ 插 入 ”| “图 像 ”| “图 像 ” 命 令 ， 弹 出 “ 选 
择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 
文件 images/index_r2_cljpg， 如 图 10-46 所 示 。 


”| 一 一 一 一 
Poe djpg ndoutojpg den.csipg 


2 indo pdauTGi mieipe don3c 


nm | 
» [Bessetbeinge) 
图 10-46 “选择 图 像 源 文件 ”对 话 框 


梧 单 击 “ 确 定 ”按钮 ， 插 入 图 像 ， 如 图 10-47 
所 示 。 


图 10-48 插入 图 像 


而 将 光标 置 于 表格 1 的 第 3 行 单元 格 中 ， 执 
行 “插入 ”| 表格” 命令 , 插入 1 行 3 列 的 表格 ， 
此 表格 记 为 表格 2， 如 图 10-49 所 示 。 


le 
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图 10-49 插入 表格 2 


面 将 光标 置 于 表格 2 的 第 1 列 单元 格 中 ， 打 
开 “ 代 码 ” 视 图 ， 在 “代码 ”视图 中 输入 背 
景 图 像 代 码 background=images/b.jpg， 如 图 
10-50 所 示 。 


图 10-47 插入 图 像 
三 将 光标 置 于 表格 1 的 第 2 行 单元 格 中 , 执 ， 


124 


图 10-50 输入 代码 


酌 返 回 “ 设 计 ” 视 图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 10-51 所 示 。 


本 返回 “设计 ”视图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 10-54 所 示 。 


图 10-51 插入 背景 图 像 
葬 将 光标 置 于 背景 图 像 上 , 执行 “插入 ”| “图 
像 ”| “图像 ”命令 ， 插 入 图 像 images/index_ 
r4_cl.， 如 图 10-52 所 示 。 


图 10-52 插入 图 像 


贾 将 光标 置 于 表格 2 的 第 2 列 单元 格 中 ， 
打开 “代码 ”视图 ， 在 “代码 ”视图 中 输入 
背景 图 像 代 码 background=-images/index r4_ 
c5.jpg， 如 图 10-53 所 示 。 


图 10-54 插入 背景 图 像 


古 将 光标 置 于 背景 图 像 上 , 执行 “插入 ”|“ 表 
格 ” 命 令 ， 插 入 1 行 2 列 的 表格 ， 此 表格 记 
为 表格 3， 如 图 10-55 所 示 。 


[和 


ee 


图 10-55 插入 表格 3 


柄 将 光标 置 于 表格 3 的 第 1 列 单元 格 中 ， 执 
行 “插入 ”| 表格 ”命令 , 插入 5 行 1 列 的 表格 ， 
此 表格 记 为 表格 4， 如 图 10-56 所 示 。 


图 10-53 输入 代码 


图 10-56 插入 表格 4 
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网 页 设计 与 网 站 建设 完全 实战 手册 


酌 将 光标 置 于 表格 4 的 第 1 行 单元 格 中 ， 执 
行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ” 命 令 ， 插 入 图 


画 将 光标 置 于 表格 3 的 第 2 列 单元 格 中 ， 执 
行 “插入 ”|“ 表 格 ” 命 令 , 插入 2 行 1 列 的 表格 ， 
此 表格 记 为 表格 5， 如 图 10-60 所 示 。 


图 10-57 插入 图 像 


天 将 光标 置 于 表格 4 的 第 2 行 单元 格 中 ， 输 
入 相应 的 文字 ， 如 图 10-58 所 示 。 


图 10-58 输入 文字 


画 将 光标 分 别 置 于 表格 4 的 第 3、4、5 行 单 
元 格 中 , 并 插入 相应 的 图 像 ， 如 图 10-59 所 示 。 
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图 10-59 插入 图 像 
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图 10-60 插入 表格 5 


静 将 光标 置 于 表格 5 的 第 1 行 单元 格 中 ， 

打开 “代码 ”视图 ， 在 “代码 ”视图 中 输入 
背景 图 像 代码 height=55 background=images/ 
jjpg， 如 图 10-61 所 示 。 


图 10-61 输入 代码 


加 返回 “设计 ”视图 ， 打 开 “ 设 计 ” 视 图 ， 
可 以 看 到 插入 的 背景 图 像 ， 如 图 10-62 所 示 。 


图 10-62 插入 背景 图 像 


第 10 音 用 表格 排版 网 页 


现 将 光标 置 于 背景 图 像 上 ， 输 入 相应 的 文字 ，| 多 返回“ 设计 ”视图 ， 可 以 看 到 插入 的 背景 
如 图 10-63 所 示 。 图 像 ， 如 图 10-66 所 示 。 
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图 10-63 输入 文字 图 10-66 插入 背景 图 像 


西 将 光标 置 于 表格 5 的 第 2 行 单元 格 中 ， 输 ”名 将 光标 置 于 背景 图 像 上 ,执行 “插入 ”| 图 
入 相应 的 文字 ， 如 图 10-64 所 示 。 像 ”|“ 图 像 ” 命 令 ， pd 
14_c10.jpg， 如 图 10-67 所 示 。 
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图 10-64 输入 文字 
图 10-67 插入 图 像 


钢 将 光标 置 于 表格 2 的 第 3 列 单元 格 中 ， 打 

开 “ 代 码 ” 视 图 ， 在 “代码 ”视图 中 输入 背 ， 殉 将 光标 置 于 表格 1 的 第 4 行 单 元 格 中 ， 打 
景 图 像 代 码 background=images/bl.jjpg， 如 图 开 “ 代 码 ” 视 图 在 “代码 ”视图 中 输入 背 
10-65 所 示 。 景 图 像 代码 ， 如 图 10-68 所 示 。 
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图 10-65 输入 代码 | 图 10-68 输入 代码 


127 


国 返 回 “ 设 计 ” 视 图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 10-69 所 示 。 


图 10-69 插入 背景 图 像 


加 将 光标 置 于 背景 图 像 上 ， 输 入 相应 的 文字 ， 


图 10-70 输入 文字 


酸 保 存 文档 ， 按 Fl2 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 10-39 所 示 。 
实战 2 一 一 创建 圆 角 表格 

先 把 这 个 圆 角 做 成 图 像 ， 然 后 再 插入 到 
表格 中 来 ， 下 面 通过 实例 讲述 圆 角 表格 的 创 
建 , 效果 如 图 10-71 所 示 , 具体 操作 步骤 如 下 : 


原始 文件 : | 原始 文件 /CH10/ 实战 2/index.html 


最 终 文件 ， | 最 终 文件 /CH10/ 实战 2/index1 html 


而 打开 网 页 文档 ， 将 光标 置 于 页 面 中 ， 如 图 


10-72 所 示 。 
区 执行 “插入 ”| “表格 ”命令 ,弹出 “表格 ” 
对 话 框 ,在 对 话 框 中 将 “ 行 数 ”设置 为 2、“ 列 
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数 ” 设 置 为 1、“ 表 格 宽度 ”设置 为 740 像素 ， 
”如 图 10-73 所 示 。 


a 弄 造 - 罚 水 监 天 绿地 
> 创造 油箱 和 济 束 福生 话 


| 
| 


mrit < | 


表格 宽度 : 740 
边 要 绍 。 。。 售 案 
单元 格 边 距 0 。 国 
单元 格 间距 0 


【LE [| 
图 10-73 “表格 ”对 话 框 
艳 单 击 “ 确 定 ”按钮 ， 插 入 表格 ， 此 表格 记 
为 表格 1， 将 光标 置 于 表格 1 的 第 1 行 单元 格 
| 中 ， 如 图 10-74 所 示 。 


EEC 


闻 造 -项 水 监护 天 
一 创造 可 天 和 庙 单条 下 话 


图 10-74 插入 表格 1 


苔 打开 “代码 ”视图 ， 在 “代码 ”视图 中 
输入 背景 图 像 代码 background=”images/bg_ 
r1.gif”， 如 图 10-75 所 示 。 


图 10-75 输入 代码 


本 返回 “设计 ”视图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 10-76 所 示 。 


图 10-76 插入 背景 图 像 


丁 将 光标 置 于 背景 图 像 上 , 执行 “插入 ”|“ 表 ， 


格 ” 命 令 ， 捕 入 2 行 1 列 的 表格 ， 此 表格 记 项 接 着 再 输入 文字 并 插入 图 像 , 即 可 完成 制作 。 


为 表格 2， 如 图 10-77 所 示 。 


图 10-77 插入 表格 2 


三 将 光标 置 于 表格 2 的 第 1 行 单元 格 中 ， 执 
行 “ 插 入 ”| “图像 ”| “图像 ”命令 ， 弹 出 “ 选 
择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 圆 
角 图 像 images/jianjie.gif， 如 图 10-78 所 示 。 
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图 10-78 “选择 图 像 源 文件 ”对 话 框 


三 单 击 “ 确 定 ”按钮 ， 插 入 圆 角 图 像 ， 如 图 
10-79 所 示 。 
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图 10-79 插入 圆 角 图 像 
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本 章 小 结 


表格 在 网 页 设计 中 的 地 位 非常 重要 ， 可 以 说 如 果 表 格 使 用 得 好 ， 就 可 以 设计 出 更 加 出 色 的 
网 页 。Dreamweaver 提供 的 表格 工具 ， 不 但 可 以 实现 一 般 功 能 的 数据 组 织 ， 还 可 以 用 于 定位 网 
页 中 的 各 种 元 素 和 设计 规划 页 面 的 布局 。 本 章 主 要 介绍 了 表格 的 基本 知识 和 操作 ， 最 后 的 综合 
实战 ， 通 过 一 步 一 步 详 细 的 讲解 ， 读 者 可 以 学 习 到 如 何 利用 表格 来 进行 网 页 的 排版 布局 ， 并 且 
还 会 学 到 一 些 表格 的 高 级 应 用 和 制作 时 的 注意 事项 等 。 
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第 了 了 章 使 用 模板 和 库 


本 章 主要 学 习 如 何 提高 网 页 的 制作 效率 ， 即 使 用 “模板 ”和 “ 库 ”。 它 们 虽然 不 是 网 页 设 


计 师 在 设计 网 页 时 必须 要 使 用 的 技术 ， 但 是 如 果 合 理 地 使 用 它们 将 会 大 大 提高 工作 效率 。 合 理 
地 使 用 模板 和 库 也 是 创建 整个 网 站 的 重 中 之 重 。 


争 ” 熟 悉 模板 的 创建 令 ”掌握 创建 和 应 用 库 的 方法 
令 ”掌握 应 用 模板 创建 网 页 的 方法 令 ”掌握 创建 完整 的 企业 网 站 模板 的 方法 


四 网 认识 模板 


模板 是 一 种 特殊 类 型 的 文档 ， 用 于 设计 “固定 的 ”页 面 布局 。 基 于 模板 创建 文档 ， 创 建 的 
文档 会 继承 模板 的 页 面 布局 。 设 计 模 板 时 ， 可 以 指定 在 基于 模板 的 文档 中 哪些 内 容 是 用 户 “ 可 
编辑 的 ”。 使 用 模板 ， 模 板 创作 者 控制 哪些 页 面 元 素 可 以 由 模板 用 户 〈 如 作家 、 图 形 艺术 家 或 
其 他 Web 开发 人 员 ) 进行 编辑 。 模 板 创作 者 可 以 在 文档 中 设置 包括 多 种 类 型 的 模板 区 域 。 

使 用 模板 可 以 控制 大 的 设计 区 域 ， 以 及 重复 使 用 完整 的 布局 。 如 果 要 重复 使 用 个 别 设计 元 
素 ， 如 站 点 的 版 权 信息 或 徽标 ， 可 以 创建 库 项 目 。 

使 用 模板 可 以 一 次 更 新 多 个 页 面 。 从 模板 创建 的 文档 会 与 该 模板 保持 连接 状态 〈 除 非 以 后 
分 离 该 文档 ) ， 可 以 修改 模板 并 立即 更 新 基于 该 模板 的 所 有 文档 中 的 设计 。 

Dreamweaver 中 的 模板 与 某 些 其 他 Adobe Creative Suite 软件 中 的 模板 的 不 同 之 处 在 于 ， 默 
认 情 况 下 ， 模 板 的 页 面 中 的 各 部 分 是 固定 的 〈 即 不 可 编辑 ) 。 


创建 模板 


在 网 页 制作 中 很 多 工作 是 重复 的 ， 如 页 面 的 顶部 和 底部 在 很 多 页 面 中 都 一 样 ， 而 同一 栏目 
中 除了 某 一 块 区 域外 ， 版 式 、 内 容 完 全 一 样 。 如 果 将 这 些 工作 简化 ， 就 能 够 大 幅度 提高 效率 ， 
而 Dreamwever 中 的 模板 就 可 以 解决 这 一 问题 ， 模 板 主要 用 于 同一 栏目 中 的 页 面 制作 。 
11.2.1 ”在 空白 文档 中 创建 模板 

直接 创建 模板 的 具体 操作 步骤 如 下 : 
国 执 行 “ 文 件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “空白 页 ”选项 
卡 中 的 “HTML 模板 ”|“ 无 ”选项 ， 如 图 11-1 所 示 。 
醒 单 击 “ 创 建 ” 按 钮 ， 即 可 创建 一 个 模板 网 页 ， 如 图 11-2 所 示 。 
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图 11-1 “新 建文 档 ” 对 话 框 
[TEETER EE 
i [3 


™ EP | 
图 11-2 创建 空白 文档 


跑 执 行 “ 文 件 "|“ 保 存 ” 命 令 ， 弹 出 
“Dreamweaver” 提 示 对 话 框 ， 如 图 11-3 所 示 。 
Drenvere 


FN 此 模板 不 含有 任何 可 编 强 区 域 。 您 想 继续 蚂 ? 


器 不 再 区 点 我 。0) 


EWE ES) | 


图 11-3 “Dreamweaver” 提 示 对 话 框 


欧 单 击 “ 确 定 ” 按 钮 , 弹出 “另存 模板 ”对 话 框 ， 
在 对 话 框 中 的 “另存 为 ”文本 框 中 输入 名 称 ， 
如 图 11-4 所 示 。 
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05 单 击 “保存 ”按钮 ， 可 以 保存 模板 文件 ， 


如 图 11-5 所 示 。 


日 


图 11-5 保存 模板 文件 


11.2.2 ”从 现 有 文档 创建 模板 


在 Dreamweaver 中 ， 有 两 种 方法 可 以 创 
建 模板 。 一 种 是 将 现 有 的 网 页 文件 另存 为 模 
板 ， 然 后 根据 需要 再 进行 修改 ， 另 外 一 种 是 
直接 新 建 一 个 空白 模板 ， 再 在 其 中 插入 需要 
显示 的 文档 内 容 。 


原始 文件 | 原始 文件 /CH11/11.2.2/index.html 


: | 最 终 文件 /CH11/11.2.2/Templates/moban 


从 现 有 文档 中 创建 模板 的 具体 操作 步骤 
如 下 : 
打开 网 页 文档 ， 如 图 11-6 所 示 。 


SRY WD Ma 0 to a I a- 


图 11-6 打开 网 页 文档 


本 执行 “文件 ”|“ 另 存 为 模板 ”命令 ， 弹 出 


， “另存 模板 ”对 话 框 ， 在 对 话 框 中 的 “站 点 ” 


下 拉 列 表 中 选择 11.2.2， 在 “另存 为 ”文本 框 
中 输入 moban， 如 图 11-7 所 示 。 


“另存 模板 ”对 话 框 


图 11-7 


区 单 击 “ 保 存 ” 按 钮 ， 弹 出 “Dreamweaver” 
提示 对 话 框 ， 如 图 11-8 所 示 。 


图 11-8 “Dreamweaver” 提 示 对 话 框 


砚 单 击 “ 是 ”按钮 ， 即 可 将 现 有 文档 另存 为 
模板 ， 如 图 11-9 所 示 。 


图 11-9 保存 模板 文件 


广 提示 妇 

不 要 随意 移动 模板 到 Templates 文件 夹 
之 外 或 者 将 任何 非 模板 文件 放 在 Templates 
文件 夹 中 。 此 外 ， 不 要 将 Templates 文件 夹 
移动 到 本 地 根 文件 夹 之 外 ， 以 免 引用 模板 时 
路 径 出 错 。 


@ 人 ~ S © 


> 


第 11 章 ”使 用 模板 和 库 “COOL 人 


11.2.3 ”创建 可 编辑 区 域 


可 编辑 区 域 就 是 基于 模板 文档 的 未 锁定 
区 域 ， 是 网 页 套用 模板 后 ， 可 以 编辑 的 区 域 。 
在 创建 模板 后 ， 模 板 的 布局 就 固定 了 ， 如 果 
要 在 模板 中 针对 某 些 内 容 进行 修改 ， 即 可 为 
该 内 容 创建 可 编辑 区 域 。 创 建 可 编辑 区 域 的 
具体 操作 步骤 如 下 : 

加 打开 模板 文档 ， 如 图 11-10 所 示 。 


图 11-10 打开 模板 文档 


到 将 光标 置 于 要 创建 可 编辑 区 域 的 位 置 ， 执 
行 “ 插 入 ”| “模板 对 象 " | “可 编辑 区 域 ” 命令， 
弹出 “新 建 可 编辑 区 域 ” 对 话 框 ， 如 图 11-11 
所 示 。 


图 11-11 


“新 建 可 编辑 区 域 ”对 话 框 


到 单 击 “ 确 定 ” 按 钮 ， 创 建 可 编辑 区 域 ， 如 
图 11-12 所 示 。 

友 提示 友 

模板 中 除了 可 以 插入 最 常用 的 “可 编辑 
区 域 ”外 ， 还 可 以 插入 一 些 其 他 类 型 的 区 域 ， 
它们 分 别 为 : “可 选区 域 ”、“ 重 复 区 域 ”、 
“可 编辑 的 可 选区 域 ” 和 “重复 表格 ”。 由 
于 这 些 类 型 需要 使 用 代码 操作 ， 并 且 在 实际 
工作 中 并 不 经 常 使 用 ， 因 此 这 里 我 们 只 简单 
地 介绍 一 下 。 
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。 “可 选区 域 ”是 用 户 在 模板 中 指定 为 可 选 的 区 域 ， 用 于 保存 有 可 能 在 基于 模板 的 文 
档 中 出 现 的 内 容 。 使 用 “可 选区 域 ”， 可 以 显示 和 隐藏 特别 标记 的 区 域 ， 在 这 些 区 
域 中 用 户 将 无 法 编辑 内 容 。 

。 “重复 区 域 ”是 可 以 根据 需要 在 基于 模板 的 页 面 中 复制 任意 次 数 的 模板 区 域 。 使 用 “ 重 
复 区 域 ”可 以 通过 重复 特定 项 目 来 控制 页 面 布 局 ,如 目录 项 \ 说 明 布 局 或 者 重复 数据 行 。 
重复 区 域 本 身 不 是 可 编辑 区 域 ， 要 使 重复 区 域 中 的 内 容 可 编辑 ， 请 在 重复 区 域内 插入 
可 编辑 区 域 。 


。 “可 编辑 的 可 选区 域 ”是 可 选区 域 的 一 种 ， 模 板 可 以 设置 显示 或 隐藏 所 选区 域 ， 并 
且 可 以 编辑 该 区 域 中 的 内 容 ， 该 可 编辑 区 域 是 由 条 件 语句 控制 的 。 

。 “重复 表格 ”是 重复 区 域 的 一 种 ， 使 用 “重复 表格 ”可 以 创建 包含 重复 行 的 表格 格式 的 
可 编辑 区 域 ， 可 以 定义 表格 属性 并 设置 哪些 表格 单元 格 可 编辑 。 


DW Ze wad ER EAD WAIM OO ER BOIW) wet 二. olelxE 
SEE a - 


图 11-12 创建 可 编辑 区 域 


六 提示 友 

作为 一 个 模板 ，Dreamweaver 会 自动 锁定 文档 中 的 大 部 分 区 域 。 模 板 设计 者 可 以 定义 基 
于 模板 的 文档 中 哪些 区 域 是 可 编辑 的 。 在 创建 模板 时 ， 可 编辑 区 域 和 锁定 区 域 都 可 以 更 改 。 
但 是 ， 在 基于 模板 的 文档 中 ,模板 用 户 只 能 在 可 编辑 区 域 中 进行 修改 ， 至 于 锁定 区 域 则 无 法 
进行 任何 操作 。 


创建 基于 模板 的 页 面 


模板 实际 上 也 是 一 种 文档 ， 它 的 扩展 名 为 .dwt， 存 放 在 根 目录 下 的 Templates 文件 夹 中 ， 
如 果 该 Templates 文件 夹 在 站 点 中 尚 不 存在 ，Dreamweaver 将 在 保存 新 建 模 板 时 自动 将 其 创建 。 
模板 创建 好 之 后 ， 就 可 以 应 用 模板 快速 、 高 效 地 设计 风格 一 致 的 网 页 ， 下 面 通过 如 图 11-13 所 
示 的 效果 讲述 应 用 模板 创建 网 页 的 方法 ， 具 体操 作 步 又 如 下 : 


原始 文件 : 原始 文件 /CH11/11.3/Templates/moban.dwt 


最 终 文件 : 最 终 文件 /CH11/11.3/index1.html 
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枉 执 行 “文件 |“ 保存 ”命令 ,弹出 “另存 为 ” 
对 话 框 ， 在 对 话 框 中 的 “文件 名 ”组 合 框 中 
输入 名 称 ， 如 图 11-16 所 示 。 


页 单 击 “ 确 定 ” 按 钮 ， 保 存 文档 ， 将 光标 置 
图 11-13 利用 模板 创建 网 页 于 页 面 中 ， 执 行 “插入 ”|“ 表 格 ” 命 令 ， 弹 
a 出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 
夯 执 行文 件 ” |“ 新建” 命令， 弹出 “新 建 设置 为 1、“ 列 ”设置 为 1、“ 表 格 宽度 ” 设 
文档 "对话 框 ,在 对 话 框 中 选择 “网 站 模板 " 站 ， 置 为 100%6， 如 图 11-17 所 示 。 

点 11.3”|“moban” 选 项 ， 如 图 11-14 所 示 。 去 一 一 二 
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图 11-17 “表格 ”对 话 框 


图 11-14 “新 建文 档 ” 对 话 框 


2 二 | 
Ce 按钮 ， 利 用 模板 创建 网 页 ， 。 酌 单 击 “确定 ”按钮 ， 插 入 表 格 ， 此 表格 记 
” 为 表格 1， 如 图 11-18 所 示 。 


图 11-15 利用 模板 创建 网 页 图 11-18 插入 表格 1 
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丁 将 光标 置 于 表格 1 的 单元 格 中 , 打开 “代码 ” 
视图 ， 在 “代码 ”视图 中 输入 背景 图 像 代码 
background=images/bg_5.jpg, 如 图 11-19 所 示 。 


' 本 将 光标 置 于 表格 2 的 第 1 行 单元 格 中 ， 执 
行 “ 插 入 ”| “图像 ”| “图像 ”命令 ,插入 图 
， 像 imagesL_ 1_1.jpg， 如 图 11-22 所 示 。 


图 11-19 输入 代码 


咒 返 回 “ 设 计 ” 视 图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 11-20 所 示 。 


图 11-20 插入 背景 图 像 


大将 光标 置 于 背景 图 像 上 ,执行 “插入 ”|* 表 
格 ” 命 令 ， 插 入 2 行 1 列 的 表格 ， 此 表格 记 
为 表格 2， 如 图 11-21 所 示 。 
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图 11-22 插入 图 像 
而 将 光标 置 于 表格 2 的 第 2 行 单元 格 中 ， 
将 第 2 行 单元 格 的 “背景 颜色 ”设置 为 
#fb501a、“ 高 ”设置 为 1， 如 图 11-23 所 示 。 


图 11-23 设置 单元 格 属性 


面 将 光标 置 于 表格 1 的 右边 , 执行 “插入 ”|“ 表 
格 ” 命 令 ， 插 入 1 行 1 列 的 表格 ， 此 表格 记 
为 表格 3， 如 图 11-24 所 示 。 


图 11-21 插入 表格 2 


了 36 


图 11-24 插入 表格 3 


酌 将 光标 置 于 表格 3 的 单元 格 中 ， 输 入 相应 
的 文字 ， 如 图 11-25 所 示 。 


图 11-25 输入 文字 


钢 将 光标 置 于 文字 中 ， 执 行 “插入 ”|“ 图 
像 ”|“ 图 像 ” 命 令 ， 插入 图像 images 
/2012720153428134.jpg， 如 图 11-26 所 示 。 

页 选 中 插入 的 图 像 ， 单 击 鼠 标 右键 ， 在 弹出 
的 快捷 菜单 中 选择 “对 齐 ”|“ 右 对 齐 ” 命 令 ， 
如 图 11-27 所 示 。 

陌 保 存 文档 ， 按 F12 键 ， 在 浏览 器 中 预览 ， 
效果 参见 图 11-13 所 示 。 


库 的 创建 、 管 理 与 应 用 


图 11-27 设置 图 像 的 对 齐 方式 


库 是 一 种 特殊 的 Dreamweaver 文件 ， 其 中 包含 已 创建 以 便 放 在 网 页 上 的 单独 的 “资源 ”或 
“资源 ”副本 的 集合 ， 库 里 的 这 些 资源 称 为 库 项 目 。 库 项 目 是 可 以 在 多 个 页 面 中 重复 使 用 的 存 
储 页 面 的 对 象 元素 , 每 当 更 改 某 个 库 项 目的 内 容 时 , 都 可 以 同时 更 新 所 有 使 用 了 该 项 目的 页 面 。 
不 难 发 现 ， 在 更 新 这 一 点 上 ， 模 板 和 库 都 是 为 了 提高 工作 效率 而 存在 的 。 


11.4.1 创建 库 项 目 


创建 库 项 目的 效果 如 图 11-28 所 示 ， 具 体操 作 步 又 如 下 : 


图 11-28 库 项 目 


最 终 文件 : | 最终 文件 /CH11/11.4.1/top.lbi 
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硬 执 行 “文件 "| “新建 > 命令, 弹出“ 新建 文档”| 
对 话 框 , 在 对 话 框 中 选择 “空白 页 ”|“ 库 项 目 ” 


选项 ， 如 图 11-29 所 示 。 


图 11-29 “新 建文 档 ” 对 话 框 


本 单 击 “ 创 建 ” 按 钮 ， 创 建 一 个 空白 的 文档 ， 
如 图 11-30 所 示 。 
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图 11-30 创建 空白 文档 
本 将 光标 置 于 页 面 中 ， 执行“ 插入 ”| “表格” 


命令 , 弹出 “表格 ”对 话 框 , 在 对 话 框 中 将 “ 行 


数 ” 设 置 为 1、“ 列 ”设置 为 1、“ 表 格 宽度 ” 
设置 为 990 像素 ， 如 图 11-31 所 示 。 


Cm CD 二 有 


“表格 ”对 话 框 


图 11-31 
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， 件 ”对 话 框 ， 在 对 话 框 中 选择 图 像 文件 ， 如 
图 11-33 所 示 。 
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页 单 击 “ 确 定 ”按钮 ， 插 入 表格 ， 如 图 11-32 
所 示 。 
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图 11-32 插入 表格 


西 将 光标 置 于 表格 中 ， 执 行 “ 插 入 ”|“ 图 
像 ”| “图像 ”命令 ， 弹 出 “选择 图 像 源 文 


图 11-33 “选择 图 像 源 文件 ”对 话 框 


丁 单 击 “确定 ”按钮 ， 插 入 图 像 ， 如 图 11-34 
所 示 。 
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图 11-34 插入 图 像 


贺 执 行 “文件 "| 保存” 命令， 弹出 “另存 为 ”| 
对 话 框 ， 在 对 话 框 中 的 “文件 名 ”组 合 框 中 ， 


输入 top.lbi， 如 图 11-35 所 示 。 
em 
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图 11-35 


“另存 为 ”对 话 框 


三 单 击 “ 保 存 ” 按 钮 ， 保 存 库 文件 ， 如 图 
11-36 所 示 。 在 浏览 器 中 预览 ， 效 果 参 见 图 
11-28 所 示 。 


图 11-36 保存 库 


11.4.2 ” 库 项 目的 应 用 


库 是 一 种 存放 整个 站 点 中 重复 使 用 或 频 ， 
繁 更 新 的 页 面 元 素 ( 如 图 像 、 文 本 和 其 他 对 象 ) ， 区 三 
的 文件 , 这 些 元 素 称 为 库 项 目 。 如 果 使 用 库 ，。 说 
就 可 以 通过 改动 库 项 目 更 新 所 有 采用 库 项 目 
的 网 页 ， 不 用 一 个 一 个 地 修改 网 页 元 素 或 重 
新 制作 网 页 。 下 面 在 如 图 11-37 所 示 的 网 页 中 ， 


应 用 库 项 目 ， 有 具体 操作 步骤 如 下 : 


原始 文件 : | 原始 文件 /CH11/11.4.2/index.html 
最 终 文件 : | 最 终 文件 /CHIL11.4.2/indexl html 


图 11-37 在 网 页 中 应 用 库 项 目 


丽 打 开 网 页 文档 , 执行 窗口 "|* 资 源 ” 命令 ， 


如 图 11-38 所 示 。 


图 11-38 打开 网 页 文档 


， 酌 打开 “资源 ” 面板， 在 面板 中 单 击 “ 库 " 
按钮 大， 显示 库 项 目 ， 如 图 11.39 所 示 。 


图 11-39 显示 库 项 目 
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本 将 光标 置 于 要 插入 库 项 目的 位 置 ， 选 中 
top, 单 击 左下 角 的 “插入 ”按钮 , 插入 库 项 目 ， 
如 图 11-40 所 示 。 


夯 打开 库 项 目 ， 选 中 图 像 ， 如 图 11-42 所 示 。 


图 11-40 插入 库 项 目 


女 提示 女 

如 果 希 望 仅仅 添加 库 项 目 内容 对 应 的 代 
码 ， 而 不 希望 它 作为 库 项 目 出 现 ， 则 可 以 按 
住 Cal 键 ， 再 将 相应 的 库 项 目 从 “资源 ” 面 
板 中 拖 到 文档 窗口 。 这 样 插入 的 内 容 就 会 以 
普通 文档 的 形式 出 现 。 


厅 保存 文 档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 11-37 所 示 。 
11.4.3 ”编辑 库 项 目 

创建 库 项 目 后 ， 根 据 自 己 的 需要 ， 还 可 
以 编辑 或 更 改 其 中 的 内 容 ， 效 果 参 见 图 11-41 
所 示 。 有 具体 操作 步骤 如 下 : 


原始 文件 ， | 原始 文件 /CH11/11.4.3/top.lbi 


最 终 文件 ， | 最终 文件 /CH11/11.4.3/index1.html 


= §.。 aa 
图 11-41 更 新 库 项 目 效 果 
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图 11-42 打开 库 文 件 


本 打开 “属性 ”面板 ， 在 面板 中 选择 “和 矩形 
热点 工具 ”， 如 图 11-43 所 示 。 
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图 11-43 选择 “矩形 热点 工具 ” 


三 将 光标 置 于 图 像 上 ， 绘 制 矩形 热点 区 域 ， 
并 输入 相应 的 链接 ， 如 图 11-44 所 示 。 
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图 11-44 绘制 热点 链接 


砚 按 步骤 02-03 的 方法 在 其 他 图 像 上 也 绘 铀 
热点 链接 ， 如 图 11-45 所 示 。 
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图 11-45 绘制 热点 区 域 


本 执行 “修改 ”|“ 库 ”|“ 更 新 页 面 ” 命 令 ， 
打开 “更 新 页 面 ”对 话 框 ， 如 图 11-46 所 示 。 


| me: BE 3 
更 新 : 团 库 项 目 0) 
同 模板 0T) 
加 显示 记录 00 
状态 : 


图 11-46 


“更 新 页 面 ”对 话 框 
酌 单 击 “ 开 始 ” 按 钮 , 即 可 按照 提示 更 新 文件 ， 


综合 实战 一 创建 完整 的 企业 网 站 模板 


在 网 页 中 使 用 模板 可 以 统一 整个 站 点 的 页 
面 风格 ， 使 用 库 项 目 可 以 对 页 面 的 局 部 统一 风 
格 ， 在 制作 网 页 时 使 用 库 和 模板 可 以 节省 大 量 
的 工作 时 间 ， 并 且 对 日 后 的 升级 带 来 很 大 的 方 
便 。 下 面 通过 实例 讲述 模板 的 创建 和 应 用 ， 以 
及 插件 的 应 用 。 

创建 的 企业 网 站 模板 的 效果 如 图 11-49 所 
示 ， 具 体操 作 步 骤 如 下 : 
硬 执 行 “文件 ?| “新建 命 令 , 弹出 “新 建文 档 ” 
对 话 框 ， 在 对 话 框 中 选择 “ 空 模板 ”|“HTML 
模板 ”|“ 无 ”选项 ， 如 图 11-50 所 示 。 


图 11-47 显示 更 新 文件 


吗 打开 应 用 库 文件 的 文档 ， 可 以 看 到 文档 已 
经 更 新 ， 如 图 11-48 所 示 。 


图 11-48 更 新 的 文件 


三 保存 文件 ， 按 F12 在 浏览 器 中 预览 ， 效 果 
参见 图 11-41 所 示 。 


图 11-49 企业 网 站 模板 效果 
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图 11-50 “新 建文 档 ” 对 话 框 


本 单 击 “ 创 建 ” 按 钮 , 创建 一 个 空白 文档 网 页 ， 
如 图 11-51 所 示 。 
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图 11-53 “另存 模板 ”对 话 框 
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图 11-51 新 建文 档 


王 执 行 “ 文 件 ”|“ 保 存 ” 命 令 ， 弹 出 
“Dreamweaver” 提 示 对 话 框 , 如 图 11-52 所 示 。 


Dreamweaver 


FN\ 此 模板 不 含有 任何 可 编辑 区 域 。 您 想 继续 中 ? 


回 不 再 警告 我 。O) 


世相 己 到 可 


图 11-52 提示 对 话 框 


页 单 击 * 确 定 ”按钮 , 弹出 “另存 模板 ”对 话 框 ， 
在 对 话 框 的 “另存 为 ”文本 框 中 输入 名 称 ， 
如 图 11-53 所 示 。 | 
西单 击 “ 保 存 ” 按 钮 ， 保 存 文档 ， 将 光标 置 ， 
于 页 面 中 ,执行 “修改 ”|“ 页 面 属性 ”命令 ， 
弹出 “页 面 属性 ”对 话 框 ， 在 对 话 框 中 进行 
相应 的 设置 ， 如 图 11-54 所 示 。 
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图 11-54 “页 面 属性 ”对 话 框 


酌 单 击 “ 确 定 ” 按 钮 ， 修 改 页 面 属性 ， 执 行 
“插入 ”| “表格 ”命令 ， 弹 出 “表格 ”对 话 
框 ， 在 对 话 框 中 将 “ 行 数 ” 设 置 为 5、“ 列 ” 
设置 为 1、“ 表 格 宽度 ”设置 为 978 像素 ， 如 
图 11-55 所 示 。 
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“表格 ”对 话 框 
醉 单 击 “ 确 定 ” 按 钮 ， 插 入 表格 ， 此 表格 记 


图 11-55 


为 表格 1， 如 图 11-56 所 示 。 


图 11-56 插入 表格 1 


三 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 , 执 ， 


行 “插入 "| 表格 ”命令 , 插入 1 行 2 列 的 表格 ， 
国 将 光标 置 于 表格 2 的 第 2 列 单元 格 中 ， 


|， 打开“ 代码” 视图， 在 “代码 ”视图 中 输入 
背景 图 像 代 码 background=../images/top_032. 
jipg， 如 图 11-60 所 示 。 


此 表格 记 为 表格 2， 如 图 11-57 所 示 。 
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图 11-57 插入 表格 2 


加 将 光标 置 于 表格 2 的 第 1 列 单元 格 中 , 执 ， 
行 “ 插 入 ”| “图 像 ”| “图像 ”命令 ， 弹 出 “ 选 
择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 ， 


像 文 件 top_03.gif， 如 图 11-58 所 示 。 


图 11-58 “选择 图 像 源 文 件 ” 对 话 框 


图 11-59 插入 图 像 


图 11-60 输入 代码 
号 返回 “设计 ”视图 ， 可 以 看 到 插入 的 背景 


图像， 如 图 11-61 所 示 。 


图 11-61 插入 背景 图 像 
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葬 将 光标 置 于 背景 图 像 上 , 执行 “插入 ”| “图 


像 ”|“ 图 像 ” 命令， 插入 图 像 ./images/ ， 


home.gif， 如 图 11-62 所 示 。 


[eT 


| 厦 返 回 “ 设 计 ” 视 图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 11-65 所 示 。 


图 11-62 插入 图 像 
贾 将 光标 置 于 刚 插入 图 像 的 右边 ， 执 行 “ 插 
入 ”| “图 像 ”| “图 像 ” 命令 ， 再 插入 图 像 / 
images/shoucang.gif， 如 图 11-63 所 示 。 
[Wm 00 ei Sh Wh Sem oe oo Wa ome ms 


图 11-65 插入 背景 图 像 


辆 将 光标 置 于 刚 插入 的 背景 图 像 上 , 执行 “ 插 
入 ”|“ 表 格 ” 命 令 ， 插 入 1 行 10 列 的 表格 ， 
此 表格 记 为 表格 3， 如 图 11-66 所 示 。 


图 11.63 振 入 图 像 
酌 将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 打 
开 “ 代 码 ” 视 图 ， 在 “代码 ”视图 中 输入 背景 
图 像 代码 background=../images/bg_02.gif， 如 图 
11-64 所 示 。 


[DW 3 A sh Wl wa i ee ms a we 


图 11-64 输入 代码 
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图 11-66 插入 表格 3 


栈 在 表格 3 的 单元 格 中 ， 分 别 插入 相应 的 图 
像 ， 如 图 11-67 所 示 。 


图 11-67 插入 图 像 


而 将 光标 置 于 表格 1 的 第 3 行 单元 格 中 ， 执 ”要 将 光标 置 于 表格 5 的 第 1 行 单元 格 之 后 ， 
行 “插入 ”| “图像 ”| “图像 ”命令 , 插入 图 像 ./ 执行 “插入 ”| “图像 ”|“ 图 像 ” 命 令 ， 插 入 
images/top.jpg， 如 图 11-68 所 示 。 | 图 像 .Jimages/leftbot 01.gif， 如 图 11-71 所 示 。 


EEC CE TIC 


EY 


11-68 插入 图 像 图 11-71 插入 图 像 


画 将 光标 置 于 表格 1 的 第 4 行 单元 格 中 ， 执 ”器 将 光标 置 于 表格 5 的 第 2 行 单元 格 中 ， 打 
行 “插入 ”|“ 表 格 ”命令 , 插入 1 行 2 列 的 表格 ，， 开 “代码 ”视图 ， 在 “代码 ”视图 中 输入 背景 


此 表格 记 为 表 4， 如 图 11-69 所 示 。 图 像 代码 background=../images/bg_09.gif， 如 
i 11-72 所 示 。 


图 11-69 插入 表格 4 


副将 光标 置 于 表格 4 的 第 1 列 单元 格 中 , 将 5 wy 

“设计 ”视图 ， 可 忆 
单元 格 的 背景 颜色 设置 为 二 0DAA1, 执行 “ 插 rie 六 ee ae ee 人 
办 = 上“ 六 本 ”入 8 亲 入行 1 区 的 认 桥 ，| wy 考 入 半 入 志 ， 扣 天 二 和 允 闻 才 构 ， 
此 表格 记 为 表格 5， 如 图 11-70 所 示 。 此 表格 记 为 表格 6， 如 图 11.73 所 示 。 


图 11-72 输入 代码 


图 11-73 插入 表格 6 
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画 将 光标 置 于 表格 6 的 第 1 行 单元 格 中 , 打 | 
开 “ 代 码 ” 视 图 ， 在 “代码 ”视图 中 输入 背 
景 图 像 代码 background=../images/leftbg 01lb. 
gif， 如 图 11-74 所 示 。 | 


图 11-74 输入 代码 


本 返 回 “ 设 计 ” 视 图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 11-75 所 示 。 


图 11-75 插入 背景 图 像 


到 将 光标 置 于 背景 图 像 上 ， 输 入 文字 ， 如 图 
11-76 所 示 。 


材 按 步骤 25~27 的 方法 ,在 表格 6 的 第 2、3、 
4 行 单元 格 中 ， 输 入 相应 的 内 容 ， 如 图 11-77 
所 示 。 


图 11-77 输入 文字 


下 将 光标 置 于 表格 5 的 第 3 行 单元 格 中 ， 执 
行 “插入 ”| 表格 ”命令 , 插入 3 行 1 列 的 表格 ， 
此 表格 记 为 表格 7， 如 图 11-78 所 示 。 


图 11-78 插入 表格 7 


缠 在 表格 7 的 单元 格 中 ， 分 别 插入 相应 的 图 
像 ， 如 图 11-79 所 示 。 


图 11-76 输入 文字 
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图 11-79 插入 图 像 


副将 光标 置 于 表格 4 的 第 2 列 单元 格 中 ， 执 
行 “ 插 入 ”| “模板 ”| “可 编辑 区 域 ”命令 ， 
如 图 


11-80 所 示 。 


5 De 人 人 
9 Cee SG 
人 

第 11 章 ”使 用 模板 和 库 CO: 
| 钢 将 光标 置 于 表格 1 的 第 5 行 单元 格 中 ， 打 
， 开 “代码 ”视图 ， 在 “代码 ”视图 中 输入 背 
， 景 图 像 代码 background=images/bg_10.gif， 如 
图 11-83 所 示 。 


图 11-80 执行 “可 编辑 区 域 ”命令 


可 弹出 “新 建 可 编辑 区 域 ”对 话 框 ， 在 对 话 
框 的 “名 称 ”文本 框 中 输入 名 称 ， 如 图 11-81 
所 示 。 


图 11-81 “新 建 可 编辑 区 域 ”对 话 框 


现 单 击 “ 确 定 ” 按 钮 ， 创 建 可 编辑 区 域 ， 如 
图 11-82 所 示 。 


图 11-82 创建 可 编辑 区 域 


图 11-83 输入 代码 
鹉 返回“ 设计 ”视图 ， 可 以 看 到 插入 的 背景 


图 像 ， 如 图 11-84 所 示 。 
i 


Ba WoW mi We ET IE 


图 11-84 插入 背景 图 像 


天 将 光标 置 于 刚 插入 的 背景 图 像 上 , 执行 “ 插 
入 ”|“ 表 格 ” 命 令 ， 插 入 1 行 1 列 的 表格 ， 
， 此 表格 记 为 表格 8， 如 图 11-85 所 示 。 


图 11-85 插入 表格 8 
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© 一 
© 


Me) 


现 将 光标 置 于 表格 8 的 单元 格 中 , 打开 <“ 代码 ”| 
视图 ， 在 “代码 ”视图 中 输入 背景 图 像 代码 ， 


background=../images/bg_08.gif, 如 图 11-86 所 示 。 


图 11-86 输入 代码 


一 返回 “设计 ”视图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 11-87 所 示 。 

三 将 光标 置 于 背景 图 像 上 ， 输 入 相应 的 文字 ， 
如 图 11-88 所 示 。 

本 保存 文档 ， 完 成 模板 的 创建 ， 参 见 图 11-49 
所 示 。 


图 11-88 输入 文字 


综合 实战 一 利用 模板 创建 网 页 
利用 模板 创建 的 网 页 效果 如 图 11-89 所 示 ， 具 体操 作 步 骤 如 下 : 


图 11-89 利用 模板 创建 的 网 页 效果 
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原始 文件 ， | 原始 文件 /CH11/ 11.6/moban.dwt 


最 终 文件 /CH1111.6/index1.html 


加 执行 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 
建文 档 ” 对 话 框 ， 在 对 话 框 中 选择 “网 站 模 
板 ”|“11.5”|“moban” 选 项 , 如 图 11-90 所 示 。 


Es 1L | 


图 11-90 “新 建文 档 ” 对 话 框 


码 单 击 “ 创 建 ”按钮 ， 利 用 模板 创建 文档 ， 
如 图 11-91 所 示 。 


图 11-91 利用 模板 创建 文档 


区 执行 “文件 ”| “保存 ”命令 , 弹出 “另存 为 ” 
对 话 框 ， 在 对 话 框 中 的 “文件 名 ”组 合 框 中 
输入 名 称 ， 如 图 11-92 所 示 。 单 击 “ 保 存 ” 按 
钮 ， 保 存 文档 。 


图 11-94 插入 表 1 


丁 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 执 
行 “ 插 入 ”| “图像 ” |“ 图像” 命令 ,弹出 “ 选 
择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 选择 图 像 
文件 ， 如 图 11-95 所 示 。 


oowbutten a 2011103010495 。 ba .02 
四 pg 


“另存 为 ”对 话 框 


咀 将 光标 置 于 可 编辑 区 域 中 , 执行 “插入 ”|“ 表 
格 ”命令 ， 弹 出 “表格 ”对 话 框 ， 将 “ 行 数 ” 


图 11-92 


a 
图 11-95 “选择 图 像 源 文 件 ” 对 话 框 


砚 单 击 “ 确 定 ”按钮 ， 插 入 图 像 ， 如 图 11-96 
所 示 。 


设置 为 2、“ 列 ”设置 为 1， 如 图 11-93 所 示 。 
西单 击 “ 确 定 ” 按 钮 ， 插 入 表格 ， 此 表格 记 
为 表格 1， 如 图 11-94 所 示 。 


“表格 ”对 话 框 


图 11-93 


” 西 将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 执 
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行 “插入 ”|“ 表 格 ” 命 令 , 插入 1 行 1 列 的 表格 ，， 
此 表格 记 为 表格 2， 如 图 11-97 所 示 。 


图 11-99 插入 图 像 
图 11-97 插入 表格 2 | 面 选 中 插入 的 图 像 ， 单 击 鼠 标 右键 ， 在 弹出 


的 快捷 菜单 中 选择 “对 齐 ”|“ 右 对 齐 ” 选项， 

王将 光标 置 于 表格 2 的 单元 格 中 ， 在 单元 格 如 图 11-100 所 示 。 

中 输入 相应 的 文字 ， 如 图 11-98 所 未 。 。 本 保存 文档 ， 完 成 利用 模板 创建 网 页 文档 的 
es 3 制作， 效果 如 图 11-89 所 示 。 


Ew 
图 11-98 输入 文字 


硬 将 光标 置 于 文字 中 ， 执 行 “插入 ”|“ 图 图 11.100 设置 图 像 对 齐 方式 
像 ”|“ 图 像 ” 命 令 ， 插 入 图 像 images/ 
20111030104958.jpg， 如 图 11-99 所 示 。 


本 章 小 结 


利用 模板 和 库 可 以 使 站 点 中 的 网 页 具有 相同 的 风格 。 本 章 的 重点 是 介绍 如 何 创建 一 个 新 的 
模板 并 利用 模板 创建 网 页 ， 以 及 如 何 使 用 库 项 目 创 建 具有 相同 特征 的 网 页 。 通 过 本 章 的 学 习 ， 
读者 应 该 掌握 如 何 基于 模板 创建 文件 ， 以 及 如 何 利用 库 处 理 重复 使 用 的 内 容 。 
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第 7 了 2 章 使 用 CSS 样式 美化 网 页 


精美 的 网 页 离 不 开 CSS 技术 ， 利 用 CSS 技术 ， 可 以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 


背景 和 其 他 效果 实现 更 加 精确 的 控制 。 使 用 CSS 样式 可 以 制作 出 更 加 复杂 和 精巧 的 网 页 ， 网 
页 维护 和 更 新 起 来 也 更 加 容易 和 方便 。 本 章 主要 介绍 CSS 样式 的 基本 概念 和 语法 、CSS 样式 
表 的 创建 、CSS 样式 的 设置 和 CSS 样式 的 应 用 实例 。 


急 ”熟悉 CS5 样式 争 ” 掌 握 利用 CSS 样式 美化 文字 的 方法 
令 ”掌握 设置 CS5 样式 表 属 性 的 方法 令 ”掌握 应 用 CSS 样式 制作 阴影 文字 的 方法 
令 ”掌握 编辑 C55 样式 的 方法 


初 识 css 


CSS 是 Cascading Style Sheet 的 缩写 ， 有 些 书 上 称 为 “ 层 秋 样式 表 ” 或 “级 联 样 式 表 ”， 是 
-种 网 页 制作 新 技术 ， 现 在 已 经 为 大 多 数 的 浏览 器 所 支持 ， 成 为 网 页 设计 必 不 可 少 的 工具 之 一 


12.1.1 CSS 概述 

所 谓 CSS 就 是 层 登 样式 表 ， 用 来 控制 一 个 文档 中 某 一 文本 区 域外 观 的 一 组 格式 属性 。 使 
用 CSS 能 够 简化 网 页 代码 ， 加 快 下 载 显 示 速 度 ， 也 减少 了 需要 上 传 的 代码 数量 ， 大 大 减少 了 
重复 劳动 的 工作 量 。 样式 表 是 对 HIML 语法 的 一 次 重大 革新 。 如 今 网 页 的 排版 格式 越 来 越 复杂 ， 
很 多 效果 需要 通过 CSS 来 实现 ， 同 HTML 相 比 ， 使 用 CSS 的 好 处 除了 在 于 它 可 以 同时 链接 多 
个 文档 之 外 ， 当 CSS 更 新 或 修改 后 ， 所 有 应 用 了 该 样式 表 的 文档 都 会 被 自动 更 新 。 

CSS 的 功能 一 般 可 以 归纳 为 以 下 几 点 : 

。 可 以 更 加 灵活 地 控制 网 页 中 文字 的 字体 、 颜 色 、 大 小 、 间 距 、 风 格 及 位 置 。 

。 ”可 以 灵活 地 设置 一 段 文 本 的 行 高 、 缩 进 ， 并 可 以 为 其 加 入 三 维 效 果 的 边框 。 

。 ”可 以 方便 地 为 网 页 中 的 任何 元 素 设置 不 同 的 背景 颜色 和 背景 图 像 。 

。 ”可 以 精确 地 控制 网 页 中 各 元 素 的 位 置 。 

。 ”可 以 为 网 页 中 的 元 素 设置 阴影 、 模 糊 、 透 明 等 效果 。 

。 ”可 以 与 脚本 语言 结合 ， 从 而 产生 各 种 动态 效果 。 

。 使 用 CSS 格式 的 网 页 ， 打 开 速 度 非常 快 。 


12.1.2 CSS 的 作用 
层 倒 样式 表 (Cascading Style Sheet，CSS) 作为 一 种 制作 网 页 必 不 可 少 的 技术 之 一 ， 现 在 


已 经 为 大 多 数 浏览 器 所 支持 。 实 际 上 ，CSS 是 一 系列 格式 规格 或 样式 的 集合 ， 主 要 用 于 控制 页 
面 的 外 观 ， 是 目前 网 页 设计 中 的 常用 技术 与 手段 。 

CSS 具有 强大 的 页 面 美化 功能 。 通 过 CSS， 可 以 控制 许多 仅 使 用 HIML 标记 无 法 控制 的 
属性 ， 并 能 轻而易举 地 实现 各 种 特效 。 

CSS 的 每 一 个 样式 表 都 是 由 相对 应 的 样式 规则 组 成 的 ， 使 用 HTML 中 的 <style> 标签 可 以 
将 样式 规则 加 入 到 HTML 中 。<style> 标 签 位 于 HIML 的 head 部 分 ,其 中 也 包含 网 页 的 样式 规则 。 
可 以 看 出 ，CSS 的 语句 是 可 以 内 嵌 在 HTML 文档 内 的 。 所 以 ， 编 写 CSS 的 方法 和 编写 HTML 
的 方法 是 一 样 的 。 

下 面 是 一 个 在 HIML 网 页 中 嵌入 的 CSS。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title></title> 

<style type="text/css"> 

和 

myo 
font-size: 12px; 
font-style: normal; 
line-height: 20px; 
color: #FF0000; 
text-decoration: none; 


} 

一 -> 
</style> 
</head> 
<body> 
</body> 
</html> 


CSS 还 具有 便利 的 自动 更 新 功能 。 在 更 新 CSS 时 ， 所 有 使 用 该 样式 的 页 面 元 素 的 格式 都 
会 自动 地 更 新 为 当前 所 设 定 的 新 样式 。 


12.1.3 ”CSS 基本 语法 

样式 表 的 基本 语法 如 下 : 

HTML 标志 { 标志 属性 : 属性 值 ， 标 志 属性 : 属性 值 ， 标 志 属 性 : 属性 值 ，…… } 

现在 首先 讨论 在 HTML 页 面 内 直接 引用 样式 表 的 方法 。 这 个 方法 必须 把 样式 表 信息 包括 
在 <style> 和 </style> 标记 中 ， 为 了 使 样式 表 在 整个 页 面 中 产生 作用 ， 应 把 该 组 标记 及 其 内 容 
放 到 <head> 和 </head> 中 去 。 

例如 ， 要 设置 HTML 页 面 中 所 有 Hl 标题 字 显示 为 蓝 色 ， 其 代码 如 下 : 


<html> 

<head> 

<title>This is a CSS samples</title> 
<style type="text/css"> 

= 

Hl {color: blue} 

= 

</style> 

</head> 

<body> 


--- 页 面 内 容 . .- 
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</body> 
</html> 


在 使 用 样式 表 的 过 程 中 ， 经 常会 有 几 个 标志 用 到 同一 个 属性 ， 例 如 ， 规 定 HIML 页 面 中 
凡是 粗 体 字 、 斜 体 字 、1 号 标题 字 均 显示 为 红色 ， 按 照 上 面 介绍 的 方法 应 书写 为 : 


B{ color: red} 
I{ color: red} 
Hl{ color: red} 


显然 这 样 书写 十 分 麻烦 ， 引 进 分 组 的 概念 会 使 其 变 得 简洁 明了 ， 可 以 写成 : 

B,I,Hl{color: red} 

用 逗号 分 隔 各 个 HTML 标志 ， 把 3 行 代码 合并 成 1 行 。 

此 外 ， 同 一 个 HTML 标志 ， 可 能 定义 多 种 属性 ， 例 如 ， 规 定 把 Hl ~ H6 各 级 标题 定义 为 
红色 黑体 字 ， 带 下 画 线 ， 则 应 写 为 : 


Hl, H2, H3, H4, H5, H6 { 
color: red; 
text-decoration: underline; 
font-family: "黑体 "} 


定义 css 样式 的 属性 


控制 网 页 元 素 外 观 的 CSS 样式 用 来 定义 字体 、 颜 色 、 边 距 和 字 间 距 等 属性 ， 可 以 使 用 
Dreamweaver 来 对 所 有 的 CSS 属性 进行 设置 。CSS 属性 被 分 为 9 大 类 : 类 型 、 背 景 、 区 块 、 方 杠 、 
边框 、 列 表 、 定 位 、 扩 展 和 过 滤 ， 下 面 分 别 介绍 。 


12.2.1 设置 类 型 属性 选择 数字 和 度量 单位 来 选择 特定 的 大 


在 CSs 规则 定义 对 话 框 左 侧 的 “分 类 ” ee 


列表 框 中 选择 “类 型 ”选项 ， 在 右 侧 可 以 设 。 “ rd 
置 CSS 的 类 型 参数 ， 如 图 12-1 所 示 。 J 


置 是 “正常 ”。 

EE 。 Line-height， 设置 文本 所 在 行 的 高 度 。 
该 设置 传统 上 称 为 “前 导 ”。 选择 “ 正 
常 ”选项 自动 计算 字体 大 小 的 行 高 ， 
或 输入 一 个 确切 的 值 并 选择 一 种 度量 
单位 。 

。 Text-decoration: 向 文本 中 添加 下 划 
线 、 上 划 线 或 删除 线 , 或 使 文本 闪烁。 
正常 文本 的 默认 设置 是 “无 ”>。“ 链 接 ” 
的 默认 设置 是 “下 划 线 ”。 将 “链接 ” 

图 12-1 选择 “类 型 ”选项 设置 为 “无 ”时 ， 可 以 通过 定义 一 个 

在 “类 型 ”设置 界面 各 选项 参数 如 下 : woo ns 

。 Font family; 用 于 设置 当前 样式 所 使 。 ”Font-weight: 对 字体 应 用 特定 或 相对 
a 的 粗 体 量 .“ 正 常 ”等 于 400,“ 粗 体 ” 


。 ”Font-size: 定义 文本 大 小 。 可 以 通过 等 于 700。 
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。 ”Font-variant: 设置 文本 的 小 型 大 写字 
母 变量 。Dreamweaver 不 在 文档 窗口 
中 显示 该 属性 。 

。 ”Text-transform: 将 选 定 内 容 中 的 每 个 
单词 的 首 字母 大 写 或 将 文本 设置 为 全 
部 大 写 或 小 写 。 

。 Color: 设置 文本 颜色 。 


12.2.2 ”设置 背景 属性 


使 用 CSS 规则 定义 对 话 框 中 的 “背景 ” 
类 别 ， 可 以 定义 CSS 样式 的 背景 ， 并 对 网 页 
中 的 任何 元 素 应 用 背景 属性 。 如 图 12-2 所 示 。 


body 的 CSS 规则 定义 一 


图 12-2 选择 “背景 ”选项 


在 CSS 的 “背景 ”选项 界面 可 以 设置 以 
下 参数 ; 

。 ”Background-color: 设置 元 素 的 背景 
颜色 。 

。 ”Background-image: 设置 元 素 的 背景 
图 像 。 可 以 直接 输入 图 像 的 路 径 和 文 
件 名 ， 也 可 以 单 击 “ 浏 览 ” 按 钮 选择 
图 像 文 件 。 

。 ”Background-repeat: 确定 是 否 重 复 及 
如 何 重复 背景 图 像 。 包 含 4 个 选项 : 
“不 重复 ” 指 在 元 素 开始 处 显示 一 次 
图 像 ，“ 重 复 ” 指 在 元 素 的 后 面 水 平 
和 垂直 平 铺 图 像 ;“ 横 向 重复 ”和 “ 纵 
向 重复 ”分 别 显示 图 像 的 水 平 带 区 和 
垂直 带 区 ， 图 像 被 剪辑 以 适合 元 素 的 
边界 。 

。 ”Background-attachment: 确定 背景 图 
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像 是 固定 在 它 的 原始 位 置 还 是 随 内 容 
一 起 滚动 。 

® Background-position (X) 和 Background- 
position (Y): 指定 背景 图 像 相对 于 元 
素 的 初始 位 置 ， 这 可 以 用 于 将 背景 图 
像 与 页 面 中 心 垂直 和 水 平 对 齐 。 如 果 
附件 属性 为 “固定 ”， 则 位 置 相对 于 
文档 窗口 而 不 是 元 素 。 


12.2.3 ”设置 区 块 属性 

使 用 CSS 规则 定义 对 话 框 中 的 “区 块 ” 
类 别 ， 可 以 定义 标签 和 属性 的 间距 和 对 齐 设 
置 ， 在 对 话 框 左 侧 “分 类 ”列表 框 中 选择 “区 
块 ”选项 , 在 右 侧 可 以 设置 相应 的 CSS 样式 ， 
如 图 12-3 所 示 。 


图 12-3 选择 “区 块 ”选项 


在 CSS 的 “区 块 ? 选 项 界面 参数 含义 如 下 : 

。 ”Word-spacing: 设置 单词 的 间距 ， 若 
要 设置 特定 的 值 ， 在 下 拉 列 表 框 中 选 
择 “ 值 ”， 然 后 输入 一 个 数值 ， 在 第 
二 个 下 拉 列 表 框 中 选择 度量 单位 。 

。 ”Letter-spacing: 增加 或 减 小 字母 或 字 
符 的 间距 。 若 要 减 小 字符 间距 ， 指 定 
一 个 负 值 ， 字 母 间距 设置 覆盖 对 齐 的 
文本 设置 。 

。 Vertical-align: 指定 应 用 它 的 元 素 的 
垂直 对 齐 方式 。 仅 当 应 用 于 <img> 
标签 时 ，Dreamweaver 才 在 文档 窗口 
中 显示 该 属性 。 

。 Textralign: 设置 元 素 中 的 文本 对 齐 
方式 


Text-indent: 指定 第 一 行文 本 缩 进 的 
程度 。 可 以 使 用 负 值 创建 凸 出 ， 但 显 
示 取 决 于 浏览 器 。 仅 当 标签 应 用 于 块 
级 元 素 时 ，Dreamweaver 才 在 文档 窗 
口中 显示 该 属性 。 

White-space: 确定 如 何 处 理 元 素 中 的 
空白 ,从 下 面 3 个 选项 中 选择 “正常 ” 
指 收缩 空白 :; “保留 ”的 处 理 方式 
与 文本 被 括 在 <pre> 标签 中 一 样 〈 即 
保留 所 有 空白 ， 包 括 空 格 、 制 表 符 和 
回 车 符 ) ; “不 换行 ”指定 仅 当 遇 到 
<br> 标签 时 文本 才 换 行 。Dreamweaver 
不 在 文档 窗口 中 显示 该 属性 。 

Display: 指定 是 否 显示 及 如 何 显示 
元 素 。 


12.2.4 ”设置 方 框 属 性 


使 用 CSS 规则 定义 对 话 框 中 的 “ 方 框 
类 别 ， 可 以 为 用 于 控制 元 素 在 页 面 上 的 放置 
方式 的 标签 和 属性 定义 设置 。 可 以 在 应 用 填 
充 和 边 距 设置 时 将 设置 应 用 于 元 素 的 各 个 边 ， 
也 可 以 使 用 “全 部 相同 ”设置 将 相同 的 设置 
应 用 于 元 素 的 所 有 边 。 

CSS 的 “ 方 框 ” 类 别 可 以 为 控制 元 素 在 
页 面 上 的 放置 方式 的 标签 和 属性 定义 设置 ， 
如 图 12-4 所 示 。 

在 CSS 的 “ 方 框 ?选项 界面 参数 含义 如 下 : 


Width 和 Height: 设置 元 素 的 宽度 和 
高 度 。 

Float: 设置 其 他 元 素 在 哪个 边 围绕 元 
素 浮动 。 其 他 元 素 按 通常 的 方式 环绕 
在 浮动 元 素 的 周围 。 

Clear: 定义 不 允许 AP Div 的 边 。 如 
果 清 除 边 上 出 现 AP Div， 则 带 清除 
设置 的 元 素 将 移 到 该 APDiv 的 下 方 。 

Padding: 指定 元 素 内 容 与 元 素 边框 
(如 果 没有 边框 ， 则 为 边 距 ) 之 间 的 
间距 。 取消 选中 “全 部 相同 ” 复 选 框 ， 
可 设置 元 素 各 个 边 的 填充 ， 选中 “全 
部 相同 ” 复 选 框 ， 会 将 相同 的 填充 属 


性 应 用 于 元 素 的 top、right、bottom 
和 left 侧 。 

。 ”Margin: 指定 一 个 元 素 的 边框 (如 果 
没有 边框 ， 则 为 填充 ) 与 另 一 个 元 素 
之 间 的 间距 。 仅 当 应 用 于 块 级 元 素 ( 段 
落 、 标 题 和 列表 等 ) 时 ，Dreamweaver 
才 在 文档 窗口 中 显示 该 属性 。 取 消 选 
中 “全 部 相同 ” 复 选 框 ， 可 设置 元 素 
各 个 边 的 边 距 ;选中 “全 部 相同 ” 复 
选 框 ， 会 将 相同 的 边 距 属性 应 用 于 元 
素 的 top、right、bottom 和 left 侧 。 


CE a) Co 
图 12-4 选择 “ 方 框 ”选项 


12.2.5 “设置 边框 属性 
CSS 的 “边框 ”类 别 可 以 定义 元 素 周围 
边框 的 设置 ， 如 图 12-5 所 示 。 


Color 
同 全 部 相同 
加 


图 12-5 选择 “边框 ”选项 


在 CSS 的 “边框 ”选项 界面 参数 含义 如 下 : 
。 Style: 用 于 设置 边框 的 样式 外 观 。 
样式 的 显示 方式 取决 于 浏览 器 。 
Dreamweaver 在 文档 窗口 中 将 所 有 样 
式 呈 现 为 实 线 。 取 消 选 中 “全 部 相 
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同 ” 复 选 框 ， 可 设置 元 素 各 个 边 的 边 
框 样式 ， 选 中 “全 部 相同 ” 复 选 框 ， 
会 将 相同 的 边框 样式 属性 应 用 于 元 素 
的 top、right、bottom 和 left 侧 。 
Width: 设置 元 素 边框 的 粗细 。 取 消 
选中 “全 部 相同 ” 复 选 框 ， 可 以 设置 
元 素 各 个 边 的 边框 宽度 ; 选中 “全 部 
相同 ” 复 选 框 ， 可 以 将 相同 的 边框 宽 
度 应 用 于 元 素 的 top、right、bottom 
和 left 侧 。 

Color: 设置 边框 的 颜色 。 可 以 分 别 
设置 每 个 边 的 颜色 。 取 消 选 中 “全 部 
相同 ” 复 选 框 ， 可 以 设置 元 素 各 个 边 
的 边框 颜色 ， 选 中 “全 部 相同 ” 复 选 
框 ， 会 将 相同 的 边框 颜色 应 用 于 元 素 
的 top、right、bottom 和 1left 侧 。 


12.2.6 ”设置 列表 属性 


CSS 的 “列表 ”类 别 可 以 定义 列表 设置 ， 
如 图 12-6 所 示 。 
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图 12-6 选择 “列表 ”选项 


在 CSS 的 “列表 ”选项 界面 参数 含义 如 下 : 


List-style-type: 设置 项 目 符号 或 编号 
的 外 观 。 

List-style-image: 可 以 为 项 目 符号 指 
定 自 定义 图 像 。 单 击 “ 浏 览 ”按钮 选 
择 图 像 ， 或 输入 图 像 的 路 径 。 
List-style-position: 设置 列表 项 文本 
是 否 换行 和 缩 进 〈 外 部 ) ， 以 及 文本 
是 否 换行 到 左边 距 〈 内 部 ) 。 


12.2.7 ”设置 定位 属性 

CSS 的 “定位 ”样式 属性 使 用 “ 层 ” 首 
选 参 数 中 定义 层 的 默认 标签 ， 将 标签 或 所 选 
文本 块 更 改 为 新 层 ， 如 图 12-7 所 示 。 


CE | mA Lamw ] 


图 12-7 选择 “定位 ”选项 


在 CSS 的 “定位 ”选项 界面 各 参数 含义 
如 下 : 


Position: 在 CSS 布局 中 ，Position 发 

挥 着 非常 重要 的 作用 ， 很 多 容器 的 

定位 是 用 Position 来 完成 。Position 

属性 有 4 个 可 选 值 ， 它 们 分 别 是 

static、absolute、fixed 和 relative。 

“absolute”: 能 够 很 准确 地 将 元 
素 移 动 到 你 想 要 的 位 置 ， 绝 对 定 
位 元 素 的 位 置 。 

> “fixed* 相对 于 窗口 的 固定 定位 。 

> “relative”: 相对 定位 是 相对 于 
元 素 默 认 位 置 的 定位 。 

> “static”: 该 属性 值 是 所 有 元 素 
定位 的 默认 情况 , 在 一 般 情况 下 ， 
我 们 不 需要 特别 去 声明 它 ， 但 有 
时 候 遇 到 继承 的 情况 ， 我 们 不 愿 
意见 到 元 素 所 继承 的 属性 影响 本 
身 ， 因 而 可 以 用 position:static 取 
消 继承 ， 即 还 原 元 素 定 位 的 默认 
值 。 

Visibility: 如 果 不 指定 可 见 性 属性 ， 

则 默认 情况 下 大 多 数 浏览 器 都 继承 父 

级 的 值 。 

Placement: 指定 AP Div 的 位 置 和 大 


小 。 


。 Clip: 定义 AP Div 的 可 见 部 分 。 如 果 指 定 了 剪辑 区 域 ， 可 以 通过 脚本 语言 访问 它 ， 并 
操作 属性 以 创建 像 擦 除 这 样 的 特殊 效果 。 通 过 使 用 “改变 属性 ”行为 可 以 设置 这 些 擦 
除 效 果 。 


12.2.8 ”设置 扩展 属性 


“扩展 ”样式 属性 包含 两 部 分 ， 如 图 12-8 所 示 。 

Page-break-before: 这 个 属性 的 作用 是 为 打印 的 页 面 设置 分 页 符 。 
Page-break-after: 检索 或 设置 对 象 后 出 现 的 页 分 割 符 。 

Cursor: 指针 位 于 样式 所 控制 的 对 象 上 时 改变 指针 图 像 。 

Filter: 对 样式 所 控制 的 对 象 应 用 特殊 效果 。 


12.3.9 “设置 过 渡 样 式 
“过 渡 ” 样 式 可 以 将 元 素 从 一 种 样式 或 状态 更 改 为 另 一 种 样式 或 状态 。“ 过 渡 ” 样 式 属性 
如 图 12-9 所 示 。 


短 园 所 有 机 属性 0) 

Pagebrer detore 0) ~ F 外 日 

aeraraaraeeerg) = | 持 和 8 河 ) 

eR M0 
z bi 


Corsor e) 
Falter 0) 
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图 12-8 选择 “扩展 ”选项 


编辑 Css 样式 


如 果 对 所 使 用 的 CSS 样式 规则 不 是 很 满 
意 ， 还 可 以 进行 修改 、 删 除 和 复制 等 操作 。 
12.3.1 修改 CSS 样式 

修改 CSS 样式 的 具体 操作 步骤 如 下 : 
国 执行“ 窗口 ”| “CSS 设计 器 ”命令 ， 打 开 
“CSS 设计 器 ”面板 ， 如 图 12-10 所 示 。 
鹃 选择 当前 页 中 的 一 个 文本 元 素 以 显示 它 的 
属性 ， 改 为 双击 “选择 器 ”中 的 某 个 属性 以 
显示 CSS 规则 定义 对 话 框 ， 然 后 进行 更 改 ， 
如 图 12-11 所 示 。 


图 12-10 “CSS 设计 器 ”面板 
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ecoration OD): Plugerlize WU) 
raine 加) 


图 12-11 CSS 规则 定义 对 话 框 


大 在 “所 选 内 容 的 摘要 ” 窗 格 中 选择 一 个 属 
性 ， 然 后 在 下 面 的 “属性 ” 窗 格 中 编辑 或 修 
改 该 属性 。 如 图 12-12 所 示 。 

区 再 次 单 击 该 选择 器 ， 以 使 名 称 处 于 可 编辑 
状态 。 如 图 12-13 所 示 。 


图 12-13 选择 器 中 修改 
CSS 样式 


图 12-12 修改 CSS 
样式 


12.3.2 ”删除 CSS 样式 

“CSS 设计 器 ”面板 可 用 来 禁用 或 删除 
属性 。 如 同 12-14 所 示 显 示 了 大 小 属性 的 “ 禁 
用 ” 包 和 “删除 ” 欧 图 标 。 当 将 鼠标 悬 停 在 
属性 上 时 ， 这 些 图 标 就 会 显示 。 在 选择 器 中 
选择 要 删除 的 CSS 样式 ， 然 后 单 击 “删除 ” 
按钮 ， 即 可 删除 CSS 样式 ， 如 图 12-15 所 示 。 
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图 12-15 单 击 
“删除 ”按钮 


图 12-14 禁用 /删除 
属性 


12.3.3 ”复制 CSS 样式 

用 户 可 以 将 一 个 选择 器 中 的 样式 复制 粘 
贴 到 其 他 选择 器 中 ， 还 可 以 复制 所 有 样式 或 
仅 复制 布局 、 文本 和 边框 等 特定 类 别 的 样式 。 
如 图 12-16 所 示 。 


UIV- DICRZ SPAN,CUrTeNt 
DIV.black2 SPAN.disabled 
#fader 

#faderli 


uli 


width : 958 px 
height : 255 px 

min-width 

min-height 


图 12-16 复制 CSS 规则 


© ~ 
© [4 
第 12 章 使 用 CSS 样式 美化 网 页 


友 高 手 支 招 女 

使 用 CSS 设计 器 复制 样式 有 以 下 几 种 情况 : 

。 如果 选择 器 没有 样式 ， 则 “复制 ”和 “复制 所 有 样式 ”处 于 禁用 状态 。 

。 ”对 于 无 法 编辑 的 远程 站 点 ，“ 粘 贴 样式 ”处 于 禁用 状态 。 但 是 ，“ 复 制 ” 和 “复制 
所 有 样式 ”都 可 以 使 用 。 

。 已 在 某 个 选择 器 上 部 分 存在 的 粘贴 样式 (重合) 可 以 使 用 。 所 有 选择 器 的 Union 均 
已 粘贴 。 

。 ”复制 粘贴 样式 也 适用 于 CSS 文件 的 不 同 连接 一 导入 、 链 接 、 内 联 样式 。 


综合 实战 


使 用 CSS 样式 可 以 灵活 并 更 好 地 控制 页 面 外 观 ， 即 从 精确 的 布局 定位 到 特定 的 字体 和 文 
本 样式 。 下 面 通过 实例 介绍 如 何在 网 页 中 创建 及 应 用 CSS 样式 。 


实战 1 一 一 利用 CSS 样式 美化 文字 


利用 CSS 可 以 美化 文字 ， 使 网 页 中 的 文 
本 始终 不 随 浏 览 器 的 改变 而 发 生变 化 ， 总 是 
保持 着 原 有 的 样式 ， 应 用 CSS 样式 美化 文字 
的 效果 如 图 12-17 所 示 , 具体 的 操作 步骤 如 下 : 


图 12-17 应 用 CSS 美化 文字 的 效果 


原始 文件 | 原始 文件 /CH12/ 实战 index.html 图 12.19 执行 “新 建 ”命令 


最 终 文件 : | 最 终 文件 /CH12/ 实战 indexl.html 

08 弹出 “新 建 CSS 规则 ”对 话 框 ， 在 对 话 框 
而 打开 网 页 文档 ， 如 图 12-18 所 示 。 中 的 “这 择 如 关 贡 ”下 拉 询 到 中 光量 “ 闫 *， 
02 选中 文档 中 要 应 用 CSS 样式 的 文本 ， 单 击 ”在 “选择 器 名 称 ”文本 框 中 输入 名 称 ， 在 “ 规 
鼠标 右键 ， 在 弹出 的 快捷 菜单 中 执行 “CSS 则 定义 ”下 拉 列 表 中 选择 “ 仅 限 该 文档 ”， 
样式 ”|“ 新 建 ”命令 ， 如 图 12-19 所 示 。 如 图 12-20 所 示 。 
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0 这 是 上 下 计生 加 类 型。 
区 ( 司 应 抽 子 性 癌 wom 元 表 ) 


Re 


3 


规则 定 尺 : 
选择 定 多 规 出 位 置 。 


图 12-20 “新 建 CSS 规则 ”对 话 框 


吸 单 击 “ 确 定 ” 按 钮 ， 弹 出 “.mh 的 CSS 规 
则 定义 ”对 话 框 , 在 对 话 框 中 将 “Font-family” 
设置 为 宋体 、“Font-size” 设 置 为 12 像素 、 
“Color” 设 置 为 氏 B5SEOF、“Line-height” 
设置 为 200%， 如 图 12-21 所 示 。 


font-fonily): 融和 
eatraimaB): = mn) emtweieht OD) 
Testa) 

Lorbei ht 0): BE WD) Te eaten 


car 加 :| eronmr 
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inx 


图 12-21 “.mh 的 CSS 规则 定义 ”对 话 框 


酌 单 击 “ 确 定 ” 按 钮 ， 新 建 CSS 样式 ， 如 图 
12-22 所 示 。 


图 12-22 新 建 CSS 样式 
现 选中 应 用 样式 的 文本 ， 在 “属性 ”面板 中 
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的 “目标 规则 ”下 拉 列 表 中 选择 要 应 用 的 样式 ， 
如 图 12-23 所 示 。 


图 12-23 应 用 CSS 样式 

品 保 存 文档 ， 按 F12 键 在 浏览 器 中 浏览 ， 效 
果 如 图 12-17 所 示 。 
实战 2 一 一 应 用 CSS 样式 制作 阴影 文字 

滤 镜 能 对 样式 所 控制 的 对 象 应 用 特殊 效 
果 (包括 模糊 和 反 转 ) ， 使 用 CSS 样式 制作 
阴影 文字 的 效果 如 图 12-24 所 示 ， 具 体 的 操作 
步骤 如 下 : 
原文 作 


最 终 文件 ， | 最 终 文件 /CH12/ 实战 2/index1.html 


图 12-24 使 用 CSS 样式 制作 阴影 文字 的 效果 


男 打开 网 页 文档 ， 将 光标 置 于 页 面 中 ， 如 图 | 
12-25 所 示 。 


， 菜单 中 执行 “CSS 样式 ”|“ 新 建 ”命令 ， 如 
”图 12-28 所 示 。 


页 选择 表格 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 


图 12-25 打开 网 页 文档 


艳 执 行 “插入 ”|“ 表 格 ” 命 令 ， 插 入 1 行 1 
列 的 表格 , 将 “表格 宽度 ”设置 为 30%, 单 击 “ 确 
定 ” 按 钮 ， 插 入 表格 ， 如 图 12-26 所 示 。 


图 12-26 插入 表格 


王将 光标 置 于 表格 内 ， 输 入 文字 ， 如 图 12-27 
所 示 。 


图 12-27 输入 文字 


Ey 


Pa 


图 12-28 执行 “新 建 ” 命 令 
丁 弹 出 “新 建 CSS 规则 ”对 话 框 ， 


在 “选择 
器 名 称 ” 文 本 框 中 输入 “.yinying”， 在 “ 选 
择 器 类 型 ”下 拉 列 表 中 选择 “类 ”， 在 “ 规 
则 定义 ”下 拉 列 表 选 择 “ 仅 限 该 文档 ”， 单 
击 


“新 建 CSS 规则 ” 


醒 弹 出 “yinying 的 CSS 规则 定义 ”对 话 框 ， 

选择 “分 类 ”列表 框 中 的 “类 型 ”选项 ， 将 
“Font-family” 设 置 为 宋体 、“Font-size” 设 
置 为 24、“Font-weight” 设 置 为 bold、“color” 


图 12-29 


对 话 框 


”设置 为 #CF9B38， 如 图 12-30 所 示 。 

琐 单 击 “ 应 用 ”按钮 ， 再 选择 “分 类 ” 列 
， 表 框 中 的 “扩展 ”选项 ， 将 “Filter” 设 置 为 
“Shadow(Color= ? . Direction= ? )”， 如 图 
，12-31 所 示 。 


161 


图 12-31 选择 “Shadow” 选 项 
本 在 “Filter” 下 拉 列 表 中 选择 “Shadow(Color= 
#5C7704, Direction=100)”， 如 图 12-32 所 示 。 
本 单 击 “ 确 定 ” 按 钮 创建 样 式 ， 选 中 文档 
中 的 表格 ， 打 开 “ 属 性 ”面板 ， 在 面板 中 的 
“Class” 下 拉 列 表 中 选择 新 建 的 样式 ， 如 图 
12-33 所 示 。 

Shadow 滤 镜 可 以 使 文字 产生 阴影 效 
果 ， 其 语法 格式 为 : Shadow(Color=?， 


本 章 小 结 


其 中 ，Color 为 投影 的 颜 


Direction=?), 


， 色 ，Direction 为 投影 的 角度 ， 取 值 范围 为 


0”-~360”， 最 常用 的 取 值 是 50”， 采 用 这 


个 值 ， 就 可 以 看 出 明显 的 阴影 效果 。 


as 


图 12-33 应 用 样式 


而 保存 文档 ， 按 F12 键 在 浏览 器 中 预览 ， 效 
果 参 见 图 12-24 所 示 。 


精美 的 网 页 高 不 开 CSS 技术 ， 采 用 CSS 技术 ， 可 以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 
背景 和 其 他 效果 实现 更 加 精确 的 控制 。Dreamweaver CC 通过 使 用 样式 表 功 能 ， 可 以 使 页 面 中 
的 文字 快速 格式 化 。 本 章 介 绍 了 在 Dreamweaver 中 如 何 对 页 面 中 的 样式 表 进行 编辑 和 管理 。 
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第 了 .3 章 使 用 CSS+DIV 灵活 布局 页 面 


设计 网 页 的 第 一 步 是 设计 布局 ， 好 的 网 页 布局 会 令 访问 者 耳目 一 新 ， 同 样 也 可 以 使 访问 
者 比较 容易 地 在 站 点 上 找到 他 们 所 需要 的 信息 。 无 论 是 使 用 表格 还 是 使 用 CSS， 网 页 布局 都 


是 把 大 块 的 内 容 放 进 网 页 的 不 同 区 域 。 有 了 CSS， 最 常用 来 布局 内 容 的 元 素 就 是 Div 标签 。 
CSS+DIV 布局 的 最 终 目 的 是 搭建 完善 的 页 面 架 构 ， 通 过 新 的 符合 Web 标准 的 构建 形成 来 提高 
网 站 设计 的 效率 、 可 用 性 及 其 他 实质 性 的 优势 。 


全 ”熟悉 网 站 与 Web 标准 争 掌握 C55 定位 与 DIV 布局 
争 ”熟悉 初 识 DIV 倒 ”掌握 CSS+DIV 布局 的 常用 方法 


初 识 DIV 


在 CSS 布局 的 网 页 中 ，<div> 与 <Span> 都 是 常用 的 标记 ， 利 用 这 两 个 标记 ， 加 上 CSS 对 
其 样式 的 控制 ， 可 以 很 方便 地 实现 网 页 的 布局 。 
13.1.1 ”Div 概述 
Div 是 CSS 中 的 定位 技术 ， 在 Dreamweaver 中 将 其 进行 了 可 视 化 操作 。 文 本 、 图 像 和 表格 
等 元 素 只 能 固定 其 位 置 ， 不 能 互相 闪 加 在 一 起 ， 使 用 Div 功能 ， 可 以 将 其 放置 在 网 页 中 的 任何 
位 置 ， 还 可 以 按 顺 序 排放 网 页 文档 中 的 其 他 构成 元 素 。 层 体现 了 网 页 技术 从 二 维 空间 向 三 维 空 
间 的 一 种 延伸 。 将 Div 和 行为 综合 使 用 ， 就 可 以 不 使 用 任何 JavaScript 或 HTML 编码 创作 出 动 
画 效果 。 
Div 的 功能 主要 有 以 下 3 个 方面 : 
。 重 肝 排放 网 页 中 的 元 素 。 利 用 Div， 可 以 实现 不 同 的 图 像 重 每 排列 ， 而 且 可 以 随意 改 
变 排放 的 顺序 。 
。 精确 的 定位 。 单 击 Div 上 方 的 四 边 形 控制 手柄 ， 将 其 拖 动 到 指定 位 置 ， 就 可 以 改变 层 
的 位 置 。 如 果 要 精确 定位 AP Div 在 页 面 中 的 位 置 ， 可 以 在 Div 的 “属性 ”面板 中 输 
入 精确 的 数值 坐标 。 如 果 将 Div 的 坐标 值 设置 为 负数 ，Div 会 在 页 面 中 消失 。 
。 显示 和 隐藏 AP Div。AP Div 的 显示 和 隐藏 可 以 在 AP Div 面板 中 完成 。 当 AP Div 
面板 中 的 AP Div 名 称 前 显示 的 是 “闭合 眼睛 ”的 图 标 合 时 ， 表 示 AP Div 被 隐藏 ; 
当 AP Div 面板 中 的 AP Div 名 称 前 显示 的 是 “ 睁 开眼 睛 ”的 图 标 融 时 ， 表 示 AP Div 
被 显示 。 
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13.1.2 创建 Div 


可 以 将 Div 理解 为 一 个 文档 窗口 内 的 又 
一 个 小 窗口 ， 像 在 普通 窗口 中 操作 一 样 ， 在 
Div 中 可 以 输入 文字 ， 也 可 以 插入 图 像 、 动 画 
影像 、 声 音 、 表 格 等 ， 对 其 进行 编辑 。 创 建 
Div 的 具体 操作 步骤 如 下 : 

硬 打开 网 页 文档 ， 如 图 13-1 所 示 。 


DW FHT ws em MN PA RE eo mr BW 


PI 3 
1 


lp ET 
图 13-1 打开 网 页 文档 


醒 执 行 “ 插 入 ”|“Div” 命 令 , 如 图 13-2 所 示 。 
区 nv | mw wm nm me. Ca oO.-lol = 


ja HE PE 


图 13-2 执行 “Div” 命 令 


王选 择 命令 后 ， 弹 出 “插入 Div” 对 话 框 ， 
如 图 13-3 所 示 。 


cv 
| 可 CD] 
人 | | | E 
了 | | 
新 建 css 规则 
图 13-3 “插入 Div” 对 话 框 
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页 单 击 “ 确 定 ” 按 钮 ， 即 可 创建 Div， 如 图 
13-4 所 示 。 


De 2 eas Ba mh Wo we So a BE 
1 Ey 


图 13-4 创建 Div 


13.1.3 ”CSS+DIV 布局 的 优势 


掌握 基于 CSS 的 网 页 布局 方式 ， 是 实现 
Web 标准 的 基础 。 在 主页 制作 时 采用 CSS 技 
术 ， 可 以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 
背景 和 其 他 效果 实现 更 加 精确 的 控制 。 只 要 
对 相应 的 代码 做 一 些 简单 的 修改 ， 就 可 以 改 
变 网 页 的 外 观 和 格式 。 采 用 CSS 布局 有 以 下 
优点 : 
。 ”大 大 缩减 页 面 代码 ， 提 高 页 面 浏览 速 
度 ， 降 低 带 宽 成 本 。 
。 ”结构 清晰 ， 容 易 被 搜索 引擎 搜索 到 。 
。 ”缩短 改版 时 间 ， 只 要 简单 地 修改 几 个 
CSS 文件 就 可 以 重新 设计 一 个 有 成 百 
上 千 页 面 的 站 点 。 
。 ”强大 的 字体 控制 和 排版 能 力 。 
。 CSS 非常 容易 编写 ， 可 以 像 写 HTML 
代码 一 样 轻 松 地 编写 CSS。 
。 提高 易 用 性 ， 使 用 CSS 可 以 结构 化 
HIML， 如 <p> 标记 只 用 来 控制 段 
落 , <heading> 标 记 只 用 来 控制 标题 ， 
<table> 标记 只 用 来 表现 格式 化 的 数 
据 等 。 
。 ”表现 和 内 容 相 分 离 ， 将 设计 部 分 分 离 
出 来 放 在 一 个 独立 样式 文件 中 。 
。 ”更 方便 搜索 引擎 的 搜索 ， 用 只 包含 结 
构 化 内 容 的 HIML 代替 风 套 的 标记 ， 
搜索 引擎 将 更 有 效 地 搜索 到 内 容 。 


。 table 的 布局 中 ,垃圾 代码 会 很 多 ， 一 些 修饰 的 样式 及 布局 的 代码 混合 一 起 ， 很 不 直观 。 
而 Div 更 能 体现 样式 和 结构 相 分 离 ， 结 构 的 重 构 性 强 。 
。 可 以 将 许多 网 页 的 风格 格式 同时 更 新 。 不 用 再 一 页 一 页 地 更 新 了 。 可 以 将 站 点 上 所 有 


的 网 页 风格 都 使 用 一 个 CSS 文件 进行 控制 ， 


只 要 修改 这 个 CSS 文件 中 相应 的 行 ， 那 


么 整个 站 点 的 所 有 页 面 都 会 随 之 发 生变 动 。 


CSS 定位 与 DIV 布局 


许多 Web 站 点 都 使 用 基于 表格 的 布局 显示 页 面 信息 。 表 格 对 于 显示 表格 数据 很 有 用 ， 并 
且 很 容易 在 页 面 上 创建 。 但 表格 还 会 生成 大 量 难 以 阅读 和 维护 的 代码 。 许 多 设计 者 首选 基于 
CSS 的 布局 ， 正 是 因为 基于 CSS 的 布局 所 包含 的 代码 数量 要 比 具 有 相同 特性 的 基于 表格 的 布 


局 使 用 的 代码 少 得 多 。 


13.2.1 “盒子 模型 


如 果 想 熟练 掌握 Div 和 CSS 的 布局 方法 ， 
首先 要 对 盒子 模型 有 足够 的 了 解 。 盒 子 模型 
是 CSS 布局 网 页 时 非常 重要 的 概念 ， 只 有 很 
好 地 掌握 了 盒子 模型 ， 以 及 其 中 每 个 元 素 的 
使 用 方法 ， 才 能 真正 地 布局 网 页 中 各 个 元 素 
的 位 置 。 

所 有 页 面 中 的 元 素 都 可 以 看 做 一 个 装 了 
东西 的 盒子 ， 盒 子 里 面 的 内 容 到 盒子 的 边框 
之 间 的 距离 即 填充 (padding) ， 盒 子 本 身 有 
边框 (border), 而 盒子 边框 外 和 其 他 盒子 之 间 ， 
还 有 边界 (margin) 。 

一 个 盒子 由 4 个 独立 的 部 分 组 成 ， 如 图 
13-5 所 示 。 


图 13-5 金子 模型 


。 ”最 外 面 的 是 边界 (margin) 。 
。 第 2 部 分 是 边框 (border) 。 边 框 可 


以 有 不 同 的 样式 。 
第 3 部 分 是 填充 (padding) 。 填 充 
用 来 定义 内 容 区 域 与 边框 (border) 
之 间 的 空白 。 
。 第 4 部 分 是 内 容 区域 。 
填充 、 边 框 和 边界 都 分 为 上 、 右 、 下 、 
左 4 个 方向 ， 既 可 以 分 别 定义 ， 也 可 以 统一 
定义 。 当 使 用 CSS 定义 盒子 的 width 和 height 
时 ， 定 义 的 并 不 是 内 容 区 域 、 填 充 、 边 框 和 
边界 所 占 的 总 区 域 。 实 际 上 定义 的 是 内 容 区 
域 content 的 width 和 height。 为 了 计算 盒子 
所 占 的 实际 区 域 必 须 加 上 padding、border 和 
Imargin。 
实际 宽度 = 左边 界 + 左 边框 + 左 填充 + 
内 容 宽度 (width) + 右 填 充 + 右边 框 + 右边 界 
实际 高 度 = 上 边界 + 上 边框 + 上 填充 + 内 
容 高 度 (height) + 下 填充 + 下 边框 + 下 边界 


13.2.2 元素 的 定位 

CSS 对 元 素 的 定位 包括 相对 定位 和 绝对 
定位 ， 同 时 ， 还 可 以 把 相对 定位 和 绝对 定位 
结合 起 来 ， 形 成 混合 定位 。 

1. position 属性 

position 的 原意 为 位 置 、 状 态 、 安 置 。 在 
CSS 布局 中 ，position 属性 非常 重要 ， 很 多 特 
殊 容 器 的 定位 必须 用 position 来 完成 。position 
属性 有 4 个 值 ， 分 别 是 : static、absolute、 
fixed 和 relative。 
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position 定位 允许 用 户 精确 定义 元 素 框 出 现 的 相对 位 置 ， 可 以 相对 于 它 通常 出 现 的 位 置 ， 
相对 于 其 上 级 元 素 ， 相 对 于 另 一 个 元 素 ， 或 者 相对 于 浏览 器 视窗 本 身 。 每 个 显示 元 素 都 可 以 用 
定位 的 方法 来 描述 ， 而 其 位 置 由 此 元 素 的 包含 块 来 决定 。 

语法 : 

Position: static | absolute | fixed | relative 

static 表示 默认 值 ， 无 特殊 定位 ， 对 象 遵 循 HTML 定位 规则 ; absolute 表示 采用 绝对 定位 ， 
需要 同时 使 用 left、right、top 和 bottom 等 属性 进行 绝对 定位 ;而 其 层 登 通过 z-index 属性 定义 ， 
此 时 对 象 不 具有 边框 ,但 仍 有 填充 和 边框 ; fixed 表示 当 页 面 滚动 时 ,元 素 保持 在 浏览 器 视 区 内 ， 
其 行为 类 似 absolute; relative 表示 采用 相对 定位 ， 对 象 不 可 层 登 ， 但 将 依据 left、right、top 和 
bottom 等 属性 ， 设 置 在 页 面 中 的 偏 移 位 置 。 

当 容器 的 position 属性 值 为 fxed 时 ， 这 个 容器 即 被 固定 定位 了 。 固 定 定位 和 绝对 定位 非 
常 类 似 ， 不 过 被 定位 的 容器 不 会 随 着 滚动 条 的 拖 动 而 变化 位 置 。 在 视野 中 ， 固 定 定位 的 容器 的 
位 置 是 不 会 改变 的 。 下 面 举例 讲述 固定 定位 的 使 用 ， 其 代码 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3. org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Css 固定 定位 </title> 
<style type="text/css"> 
*{margin: Opx; 
padding:0px;} 
#all{ 
width:500px; 
height:550px; 
background-color:#cccOcc;} 
#fixed{ 
width:150px; 
height:80px; 
border:1l5px outset #f£f0ff00; 
background-color:#9c9000; 
position:fixed; 
top:20px; 
left:10px;} 
#af 
width:250px; 
height:300px; 
margin-left:20px; 
background-color:#ee00ee; 
border:2px outset #000000;} 
</style> 
</head> 
<body> 
<div id="all"> 
<div id="fixed"> 固定 的 容器 </div> 
<div id="a"> 无 定位 的 div 容器 </div> 
</div> 
</body> 
</html> 


在 本 例 中 给 外 部 Div 设置 了 # ccc0ce 背景 色 ， 给 内 部 无 定位 的 Div 设置 了 #ee00ee 背景 色 ， 
而 给 固定 定位 的 Div 容器 设置 了 #9c9000 背景 色 ， 并 设置 了 outset 类 型 的 边框 。 在 浏览 器 中 浏 
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览 效果 如 图 13-6 和 图 13-7 所 示 。 


图 13-6 固定 定位 效果 图 13-7 拖 动 浏览 器 后 的 效果 


2. float 属性 

应 用 Web 标准 创建 网 页 以 后 ，float 浮动 属性 是 元 素 定位 中 非常 重要 的 属性 ， 常 常 通过 对 
Div 元 素 应 用 Hoat 浮动 来 进行 定位 ， 不 但 可 以 对 整个 版 式 进行 规划 ， 还 可 以 对 一 些 基本 元 素 如 
导航 等 进行 排列 。 

语法 : 

float:none|left|right 

none 是 默认 值 ， 表 示 对 象 不 浮动 ，left 表示 对 象 浮 在 左边 ，right 表示 对 象 浮 在 右边 。 

CSS 允许 任何 元 素 浮动 Hoat， 不 论 是 图 像 、 段 落 还 是 列表 。 无 论 先前 元 素 是 什么 状态 ， 浮 
动 后 都 成 为 块 级 元 素 。 浮 动 元 素 的 宽度 默认 为 auto。 


次 指点 迷津 友 

浮动 有 一 系列 控制 它 的 规则 : 

。 浮动 元 素 的 外 边缘 不 会 超过 其 父 元 素 的 内 边缘 。 

。 浮动 元 素 不 会 互相 重 登 。 

。 浮动 元 素 不 会 上 下 浮动 。 

float 属性 的 工作 原理 并 不 简单 ， 需 要 在 实践 中 不 断 地 总 结 经 验 。 下 面 通 过 几 个 小 例子 ， 来 
说 明 它 的 基本 工作 情况 。 

如 果 float 取 值 为 none 或 没有 设置 float 时 ， 不 会 发 生 任何 浮动 ， 块 元 素 独占 一 行 ， 紧 随 其 
后 的 块 元 素 将 在 新 行 中 显示 。 其 代码 如 下 所 示 ， 在 浏览 器 中 浏览 的 效果 如 图 13-8 所 示 。 可 以 
看 到 由 于 没有 设置 Div 的 float 属性 ， 因 此 每 个 Div 都 单独 占 一 行 ， 两 个 Div 分 两 行 显示 。 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 没有 设置 Hoat 时 </title> 
<style type="text/css"> 
#content a {width:200px; height:80px; border:2px solid #000000; 
margin:15px7 background:#0ccccc;} 
#content b {width:200px; height:80px; border:2px solid #000000; 
margin:15px; background:#ff00ff;} 
</style> 
</head> 
<body> 
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<div id="content a"> 这 是 第 一 个 DIV</div> 
<div id="content b"> 这 是 第 二 个 DIV</div> 
</body> 
</html> 
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图 13-8 没有 设置 float 
下 面 修改 一 下 代码 ， 使 用 float:left 对 content a 应 用 向 左 的 浮动 ， 而 content_b 不 应 用 任何 


浮动 。 其 代码 如 下 所 示 ， 在 浏览 器 中 浏览 效果 如 图 13-9 所 示 。 可 以 看 到 对 content a 应 用 向 左 
的 浮动 后 ，content a 向 左 浮动 ，content_b 在 水 平方 向 紧 跟 着 在 它 的 后 面 ， 两 个 Div 占 一 行 ， 
在 一 行 上 并 列 显 示 。 
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<html xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title> 一 个 设置 为 左 浮动 ， 一 个 不 设置 浮动 </title> 
<style type="text/css"> 
#content a {width:200px; height:80px; float:left; 
border:2px solid #000000; margin:15px; background:#0ccccc;} 
#content b {width:200px; height:80px; border:2px solid #000000; 
margin:15px; background:#ff00ff;} 
</style> 
</head> 
<body> 
<div id="content_a"> 这 是 第 一 个 DIV 向 左 浮动 </div> 
<div id="content_b"> 这 是 第 二 个 DIV 不 应 用 浮动 </div> 
</body> 
</html> 
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图 13-9 一 个 设置 为 左 浮动 ， 一 个 不 设置 浮动 


第 13 章 使 用 CSS+DIV 灵活 布局 页 面 


下 面 修改 一 下 代码 ， 同 时 对 这 两 个 容器 应 用 向 左 的 浮动 ， 其 CSS 代码 如 下 所 示 ， 在 浏览 
器 中 浏览 ， 可 以 看 到 效果 与 图 13-10 一 样 ， 两 个 Div 占 一 行 ， 在 一 行 上 并 列 显 示 。 
<style type="text/css"> 
#content a {width:200px; height:80px; float:left; border:2px solid #000000; 


margin:15px; background:#0ccccc;} 
#content b {width:200px; height:80px; float:left; border:2px solid #000000; 


margin:l5px; background:#ff00ff;} 
</style> 


ts 


图 13-10 同时 向 左 浮动 


下 面 修改 上 面 代码 中 的 两 个 元 素 ， 同 时 应 用 向 右 的 浮动 ， 其 CSS 代码 下 所 示 ， 在 浏览 器 
中 浏览 ， 效 果 如 图 13-11 所 示 。 可 以 看 到 同时 对 两 个 元 素 应 用 向 右 的 浮动 基本 保持 了 一 致 但 


请 注意 方向 性 ， 第 二 个 在 左边 ， 第 一 个 在 右边 。 


<style type="text/css"> 
#content a {width:200px; height:80px; float:right; border:2px solid #000000; 


margin:15px; background:#0ccccc;} 
#content b {width:200px; height:80px; float:right; border:2px solid #000000; 


margin:15px; background:#ff00ff;} 
</style> 
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图 13-11 同时 向 右 的 浮动 


天 CSS+DIV 布局 的 常用 方法 


无 论 是 使 用 表格 还 是 使 用 CSS， 网 页 布局 都 是 把 大 块 的 内 容 放 进 网 页 的 不 同 区域 。 有 了 
CSS， 最 常用 来 组 织 内 容 的 元 素 就 是 <div> 标签 。CSS 排版 是 一 种 很 新 的 排版 理念 ， 首 先 要 将 
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页 面 使 用 <div> 整体 划分 几 个 板块 ， 然 后 对 各 个 板块 进行 CSS 定位 ， 最 后 在 各 个 板块 中 添加 
相应 的 内 容 。 


13.3.1 使 用 Div 对 页 面 整 体 规划 


在 利用 CSS 布局 页 面 时 ， 首 先 要 有 一 个 整体 的 规划 ， 包 括 整 个 页 面 分 成 哪些 模块 ， 各 个 
模块 之 间 的 父子 关系 等 。 以 最 简单 的 框架 为 例 ， 页 面 由 banner、 主 体内 容 (content) 、 菜 单 导 
航 (links) 和 脚注 (footer) 几 个 部 分 组 成 ， 各 个 部 分 分 别 用 自己 的 id 来 标识 ， 如 图 13-12 所 示 。 


container 


content 


links 


footer 


图 13-12 页 面 内 容 框架 
其 页 面 中 的 HTML 框架 代码 如 下 : 


<div id="container">container 
<div id="banner">banner</div> 
<div id="content">content</div> 
<div id="links">links</div> 
<div id="footer">footer</div> 
</div> 


实例 中 每 个 板块 都 是 一 个 <div>， 这 里 直接 使 用 CSS 中 的 id 来 表示 各 个 板块 ， 页 面 的 所 
有 Div 块 都 属于 container， 一 般 的 Div 排版 都 会 在 最 外 面 加 上 这 个 父 Div， 便 于 对 页 面 的 整体 
进行 调整 。 对 于 每 个 Div 块 ， 还 可 以 再 加 入 各 种 元 素 或 行内 元 素 。 


13.3.2 ”设计 各 块 的 位 置 


当 页 面 的 内 容 已 经 确定 后 ， 则 需要 根据 内 容 本 身 考 虑 整体 的 页 面 布局 类 型 ， 例 如 单 栏 、 双 
栏 或 三 栏 等 ， 这 里 采用 的 布局 如 图 13-13 所 示 。 

由 图 13-13 可 以 看 出 ， 在 页 面 外 部 有 一 个 整体 的 框架 container，banner 位 于 页 面 整体 框架 
中 的 最 上 方 ，content 与 links 位 于 页 面 的 中 部 ， 其 中 content 占据 着 页 面 的 绝 大 部 分 。 最 下 面 是 
页 面 的 脚注 footer。 
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整理 好 页 面 的 框架 后 ， 就 可 以 利用 CSS 对 各 个 板块 进行 定位 ， 实 现 对 页 面 的 整体 规划 ， 
然后 再 往 各 个 板块 中 添加 内 容 。 
下 面 首先 对 body 标记 与 container 父 块 进行 设置 ，CSS 代码 如 下 : 


body { 
margin:15px; 
text-align:center; 

} 

#container{ 
width:1000px; 
border:1lpx solid #000000; 
padding:10px; 

} 


上 面 代码 设置 了 页 面 的 边界 和 页 面 文本 的 对 齐 方 式 ， 以 及 父 块 的 宽度 为 1000px。 下 面 来 
设置 banner 板块 ， 其 CSS 代码 如 下 : 


#banner{ 
margin-bottom: 5px; 
padding:20px; 
background-color:#aaaa0f; 
border:lpx solid #000000; 
text-align:center; 


} 
这 里 设置 了 banner 板块 的 边界 、 填 充 和 背景 颜色 等 。 


下 面 利用 float 方法 将 content 移动 到 左 侧 ，links 移动 到 页 面 右 侧 ， 这 里 分 别 设置 了 这 两 个 
板块 的 宽度 和 高 度 ， 读 者 可 以 根据 需要 自己 调整 。 代 码 如 下 : 


#content{ 
float:left; 
width:670px; 
height:300px; 
background-color:#ca0a0f; 
border:1lpx solid #000000; 
text-align:center; 

} 

#1inks{ 
float :right; 
width:300px; 
height:300px; 
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background-color:yellow; 
border:lpx solid #000000; 
text-align:center; 


于 content 和 links 对 象 都 设置 了 浮动 属性 ， 因 此 footer 需要 设置 clear 属性 ， 使 其 不 受 
浮动 的 影响 ， 代 码 如 下 : 


#footer{ 
clear:both; /* 不 受 float 影响 */ 
padding:10px; 
border:lpx solid #000000; 
background-color:green; 
text-align:center; 


i 

这 样 页 面 的 整体 框架 便 搭建 好 了 ， 如 图 13-14 所 示 。 这 里 需要 指出 的 是 content 块 中 不 能 
放宽 度 太 长 的 元 素 ， 如 很 长 的 图 片 或 不 折 行 的 英文 等 ， 否 则 links 将 再 次 被 挤 到 content 下 方 。 

后 期 维护 时 如 果 希 望 content 的 位 置 与 links 对 调 ， 只 需要 将 content 和 links 属性 中 的 left 
和 right 改变 即 可 。 这 是 传统 的 排版 方式 所 不 可 能 实现 的 ， 也 正 是 CSS 排版 的 魅力 之 一 。 

另外 ， 如 果 links 的 内 容 比 content 的 长 ,在 正 浏 览 器 上 footer 就 会 贴 在 content 下 方 而 与 
links 出 现 重 合 。 


container 


图 13-14 搭建 好 的 页 面 布局 


本 章 小 结 


CSS+DIV 的 优点 ， 众 所 周知 ， 简 单 地 说 ， 就 是 将 网 页 的 表现 和 内 容 分 离 。 从 设计 分 工 的 
角度 来 看 ， 便 于 分 工人 合作， 美工 就 管 切 图 和 制作 CSS， 程 序 员 则 专心 代码 就 可 以 了 。 从 另外 一 
个 角度 来 说 ， 除 了 网 站 以 外 ， 现 在 的 应 用 程序 也 多 以 网 页 形式 输出 ， 不 管 你 是 网 页 设计 师 还 是 
一 个 程序 员 ， 掌 握 CSS 总 是 一 件 非常 重要 的 事 。 


精彩 的 网 页 图 像 


第 44 章 网 页 图 像 设计 软件 Photoshop CC 


Adobe Photoshop CC 是 数字 影像 处 理 和 编辑 的 业界 标准 ， 提 供 广泛 的 专业 级 修饰 工具 套 
件 ， 还 封装 了 专 为 激发 灵感 而 设计 的 强大 编辑 功能 。 在 网 页 设计 领域 里 ，Photoshop 是 不 可 缺 
少 的 一 个 设计 软件 ， 一 个 好 的 网 页 创意 离 不 开 图 片 ， 只 要 涉及 图 像 ， 就 会 用 到 图 像 处 理 软件 ， 
Photoshop 理所当然 就 会 成 为 网 页 设计 中 的 一 员 。 使 用 Photoshop 不 仅 可 以 对 图 像 进 行 精确 的 
加 工 ， 还 可 以 将 图 像 制作 成 网 页 动画 上 传 到 网 页 中 。 


技术 要 点 
令 Photoshop CC 介绍 争 制作 文本 特效 
人 争 ”绘图 工具 的 使 用 争 输出 图 像 


Photoshop CC 介绍 


2013 年 7 月 ，Adobe 公司 推出 最 新 版 本 的 Photoshop 一 一 Photoshop CC (Creative Cloud) 。 
除 b Photoshop CS6 中 所 包含 的 功能 ，Photoshop CC 新 增 了 相机 防 抖动 功能 、CameraRAW 功能 
改进 、 图 像 提 升 采样 、 属 性 面板 改进 、Behance 集成 等 功能 ， 以 及 Creative Cloud， 即 云 功能 。 
工作 界面 如 图 14-1 所 示 。 


工具 箱 


图 14-1 Photoshop CC 工作 界面 


14.1.1 菜单 栏 
Photoshop CC 包括 “文件 ”、“ 编 辑 ”、“ 图 像 ”、“ 图 层 ”、“ 类 型 ”、“ 选 择 ”、“ 滤 
镜 ”、“3D”、“ 视 图 ”、“ 窗 口 ” 和 “帮助 ”11 个 菜单 ， 如 图 14-2 所 示 。 


图 14-2 菜单 栏 


。 “文件 ”菜单 :对 所 修改 的 图 像 进 行 打开 、 关 闭 、 存 储 、 输 出 、 打 印 等 操作 。 

。 “编辑 ”菜单 : 编辑 图 像 过 程 中 所 用 到 的 各 种 操作 ， 如 复制 、 粘 贴 等 一 些 基 本 操作 。 

。 “图 像 ”菜单 : 用 来 修改 图 像 的 各 种 属性 ， 包 括 图 像 和 画布 的 大 小 、 图 像 颜 色 的 调整 、 
修正 图 像 等 。 

。 “图 层 ” 菜 单 : 图 层 基 本 操作 命令 。 

。 “类 型 ”菜单 : 全 新 文字 系统 消除 锯齿 选项 可 提供 文字 在 网 页 上 显示 效果 的 逼真 预览 。 
这 个 新 选项 非常 符合 基于 Windows 和 -Mac 演 染 的 主流 浏览 器 的 消除 锯齿 选项 。 

。 “选择 ”菜单 : 可 以 对 选区 中 的 图 像 添 加 各 种 效果 或 进行 各 种 变化 而 不 改变 选区 外 的 
图 像 ， 还 提供 了 各 种 控制 和 变换 选区 的 命令 。 

。 “ 滤 镜 ”菜单 : 用 来 添加 各 种 特殊 效果 。 

。 “3D” 菜 单 : 在 默认 的 “实时 3D 绘画 ”模式 下 绘画 时 ， 将 看 到 您 的 画笔 描 边 同时 在 
3D 模型 视图 和 纹理 视图 中 实时 更 新 。“ 实 时 3D 绘画 ”模式 也 可 显著 提升 性 能 ， 并 可 
最 大 限度 地 减少 失真 。 

。 “视图 ”菜单 :用 于 改变 文档 的 视图 ， 如 放大 、 缩 小 、 显 示 标尺 等 。 

。 “窗口 ”菜单 : 用 于 改变 活动 文档 ， 以 及 打开 和 关闭 Photoshop CC 的 各 个 浮动 面板 。 

。 “帮助 ”菜单 : 用 于 查找 帮助 信息 。 


14.1.2 ”工具 箱 及 工具 选项 栏 
Photoshop 的 工具 箱包 含 多 种 工具 ,要 使 用 这 些 工 具 ， 只 要 单 击 工具 箱 中 的 工具 按钮 即 可 ， 
如 图 14-3 所 示 。 


使 用 Photoshop CC 绘制 图 像 或 处 理 图 像 时 ， 需 要 在 工具 箱 中 选择 工具 ， 同 时 需要 在 工具 
选项 栏 中 进行 相应 的 设置 ， 如 图 14-4 所 示 。 
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图 14-3 工具 箱 图 14-4 工具 选项 栏 
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14.1.3 ”文档 窗口 及 状态 栏 14.1.4 面板 

图 像 文件 窗口 就 是 显示 图 像 的 区 域 ， 也 在 默认 情况 下 ， 面 板 位 于 文档 窗口 的 右 
是 编辑 和 处 理 图 像 的 区 域 。 在 图 像 窗口 中 可 侧 ， 其 主要 功能 是 查看 和 修改 图 像 。 一 些 面 
以 实现 Photoshop 中 所 有 的 功能 ， 也 可 以 对 图 ， 板 中 的 菜单 提供 其 他 命令 和 选项 。 可 使 用 多 
像 窗口 进行 多 种 操作 。 如 改变 窗口 大 小 和 位 ”种 不 同方 式 组 织 工 作 区 中 的 面板 。 可 以 将 面 
置 ， 对 窗口 进行 缩放 等 。 文 档 窗口 如 图 14-5 ， 板 存储 在 “面板 箱 ” 中 ， 以 使 它们 不 干扰 工 
所 示 。 作 且 易于 访问 ， 或 者 可 以 让 常用 面板 在 工作 

状态 栏 位 于 图 像 文件 窗口 的 最 底部 ， 主 ”区 中 保持 打开 。 另 一 个 选项 是 将 面板 编组 ， 
要 用 于 显示 图 像 处 理 的 各 种 信息 ， 如 图 14-6 .或 将 一 个 面板 停放 在 另 一 个 面板 的 底部 ， 如 
所 示 。 图 14-7 所 示 。 


文档 :1.40M/1.40M ps 


图 14-6 状态 栏 


绘图 工具 的 使 用 


利用 工具 进行 绘图 是 Photoshop 最 重要 的 功能 之 一 ， 只 要 用 户 熟 练 掌握 这 些 工具 并 有 着 一 
定 的 美术 造型 能 力 ， 就 能 绘制 出 精美 的 作品 来 。 在 网 页 图 像 设计 中 会 经 常用 到 这 些 绘图 工具 ， 
熟练 掌握 绘图 工具 的 使 用 是 非常 必要 的 。 
14.2.1 使 用 矩形 工具 和 圆 角 矩形 工具 

使 用 “矩形 工具 ”绘制 矩形 ， 只 需 在 选中 “和 拢 形 工具 ”后 ， 在 画布 上 单 击 后 拖 动 鼠 标 即 可 
绘 出 所 需 矩 形 。 在 拖 动 时 如 果 按 住 Shift 键 ， 则 会 绘制 出 正方 形 ， 具 体操 作 步 骤 如 下 ;: 
加 执行 “文件 ”| “打开 ”命令 , 打开 图 像 文件 “和 矩形 工具 jpg”, 选择 工具 箱 中 的 “矩形 工具 ”， 
如 图 14-8 所 示 。 
吧 在 工具 选项 栏 中 将 填充 颜色 设置 为 粉色 ， 按 住 鼠 标 左 键 在 舞台 中 绘制 矩形 ， 如 图 14-9 所 示 。 


14-7 停靠 在 面板 底部 
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02 在 工具 选项 栏 中 将 填充 颜色 设置 为 白色 ， 
“ 描 边 ”颜色 设置 为 acd598， 按 住 鼠 标 左 键 


在 舞台 中 绘制 圆 角 矩形 ， 如 图 14-11 所 示 。 


图 14-11 绘制 圆 角 矩形 


14.2.2 ”使 用 单行 选 框 工具 及 单列 选 
框 工具 
选 框 工具 位 于 工具 箱 的 左上 角 ， 它 包括 
矩形 选 框 、 圆 形 选 框 、 单 行 选 框 、 单 列 选 框 。 
要 选取 它 可 以 单 击 它 ， 也 可 以 按键 盘 上 的 快 
捷 键 M， 如 图 14-12 所 示 。 


图 14-9 绘制 矩形 


7， 匡 : 矩 形 选 框 工具 
“ 圆 角 矩形 工具 ”可 以 绘制 具有 平滑 9 .i 
边缘 的 矩形 , 其 使 用 方法 与 “矩形 工具 ”相同 ， 3 ET 有 
只 需 用 鼠标 在 画布 上 拖 动 即 可 ， 具 体操 作 步 图 14-12 选 框 工具 
又 如 下 


画 选中 “单行 选中 工具 ”后 ， 可 以 用 鼠标 在 
呀 执行 “文件 ”| “打开 ”命令 ， 打 开 图 像 文 ”绘图 区 拉 出 一 个 像素 高 的 选 框 ， 其 实 就 是 像 
件 “ 矩 形 工具 jpg”， 选 择 工具 箱 中 的 “ 圆 角 。 素 高 为 1 的 水 平 线 选择 框 ， 如 图 14-13 所 示 ， 
矩形 工具 ”， 如 图 14-10 所 示 。 其 工具 选项 栏 中 删除 “其 任务 栏 中 只 有 选择 

ES 二 方式 可 选 ”， 羽 化 只 能 为 0px， 样 式 不 可 选 。 


图 14-10 打开 图 像 文件 图 14.13 单行 选 框 
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吗 选中 “单列 选 框 工具 ”后 ， 可 以 用 鼠标 在 
绘图 区 拉 出 一 个 像素 宽 的 选 框 ， 其 实 就 是 像 
素 宽 为 1 的 垂直 线 选择 框 ， 如 图 14-14 所 示 ， 

其 工具 选项 栏 中 的 内 容 与 用 法 与 “单行 选 框 
工具 ”的 完全 相同 。 


图 14-14 单列 选 框 


14.2.3 ”使 用 “直线 工具 ” 
使 用 “直线 工具 ”， 可 以 绘制 直线 或 有 箭 
头 的 线段 ， 使 用 方法 同 前 ， 鼠 标 拖 动 的 起 始点 


为 线段 起 点 ， 拖 动 的 终点 为 线段 的 终点 ， 如 图 
14-15 所 示 是 使 用 “直线 工具 ”绘制 的 效果 。 


图 14-15 使 用 “直线 工具 ”绘制 的 效果 


14.2.4 ”使 用 颜料 桶 工具 

“颜料 桶 工具 ”选项 栏 如 图 14-16 所 示 ， 
包括 填充 、 图 案 、 模 式 、 不 透明 度 、 容 差 、 
消除 锯齿 、 连 续 的 、 所 有 图 层 等 参数 。 


“颜料 桶 工具 ”选项 栏 


图 14-16 


网 页 图 像 设 计 软 件 Photoshop CC Ls 《 


各 参数 含义 如 下 : 

。 “填充 ”: 可 选择 用 前 景色 或 用 图 案 
填充 ， 只 有 选择 用 “图 案 ” 填 充 时 ， 
其 后 面 的 “图 案 ” 选 项 才 可 选 。 

。 “图 案 ”: 存放 着 定义 过 的 可 供 选 择 


填充 的 图 案 。 

。 “模式 ”: 用 于 设置 填充 时 的 色彩 混 
合 方式 。 

。 “不 透明 度 ”: 用 于 设置 填充 时 的 不 
透明 度 。 


。 “ 容 差 ”: “消除 锯齿 ”“ 连 续 的 ”、 
“所 有 图 层 ” 等 选项 的 使 用 都 与 魔法 
橡皮 的 使 用 相同 。 

“颜料 桶 工具 ”用 于 向 鼠标 单 击 处 色彩 相 

近 并 相连 的 区 域 填充 前 景色 或 指定 图 案 ， 单 击 
鼠标 就 可 以 完成 工作 ， 具 体操 作 步 又 如 下 : 
双打 开 图 像 文 件 ， 选 择 工 具 箱 中 的 “颜料 桶 
工具 ”， 如 图 14-17 所 示 。 


图 14-17 选择 “颜料 桶 工具 ” 


02 在 选项 栏 中 选择 “前 景 ” 选 项 ， 在 弹出 的 
下 拉 列 表 中 选择 “图 案 ”选项 , 如 图 14-18 所 示 。 


图 14-18 选择 “图 案 ” 选 项 


0 


) 


© 


0 


和 网 页 设计 与 网 站 建设 完全 实战 手册 


吗 在 选项 栏 中 选择 “图 案 ” 选 项 ， 在 弹出 的 ， 值 ， 也 可 以 自己 定义 。 渐 变 方向 有 线性 、 贺 
列表 框 中 选择 相应 的 图 案 ， 如 图 14-19 所 示 。 ， 形 放射 状 、 方 形 放 射 状 、 角 形 和 和 斜 向 等 几 种 。 
如 果 不 选 择 区 域 ， 将 对 整个 图 像 进行 渐变 填 
充 。 使 用 时 , 首先 选择 好 渐变 方式 和 渐变 色彩 ， 
用 鼠标 在 图 像 上 单 击 确定 起 点 ， 拖 动 后 再 单 
击 确定 终点 ， 这 样 一 个 渐变 就 做 好 了 ， 可 以 
用 拖 动 线段 的 长 度 和 方向 来 控制 渐变 效果 ， 
如 图 14-21 和 图 14-22 所 示 。 


图 14-19 选择 相应 的 图 案 


吗 选 择 以 后 在 舞台 中 单 击 即 可 ， 如 图 14-20 
所 示 。 


图 14-20 使 用 油漆 桶 填充 


14.2.5 ”使 用 渐变 工具 
使 用 这 个 工具 可 以 创造 出 两 种 以 上 颜色 
的 渐变 效果 。 渐 变 方式 既 可 以 选择 系统 设 定 图 14-22 径 向 渐变 


下 本 〗 制作 文本 特效 
Photoshop 提供 了 丰富 的 文字 工具 ， 人 允许 在 图 像 背景 上 制作 多 种 复杂 的 文字 效果 。 
14.3.1 图 层 的 基本 操作 


1. 新 建 图 层 

图 层 的 新 建 有 几 种 情况 ，Photoshop 在 执行 某 些 操作 时 会 自动 创建 图 层 ， 例 如 ， 当 在 进行 
图 像 粘贴 时 ， 或 者 在 创建 文字 时 ， 系 统 会 自动 为 粘贴 的 图 像 和 文字 创建 新 图 层 ， 也 可 以 直接 创 
建新 图 层 。 
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执行 “图 层 ”|“ 新 建 ”|“ 图 层 ” 命 令 ， 
打开 “新 建 图 层 ” 对 话 框 ， 如 图 14-23 所 示 。 
单 击 “ 确 定 ”按钮 ， 即 可 新 建 “ 图 层 1”， 如 
图 14-24 所 示 。 


加 使 用 前 一 图 层 创 建部 贴 莹 版 (P) 
颜色 (C): x] 无 
~ 不 通明 度 (0): 100 。 


模式 (M): 正常 
(正常 模式 不 存在 中 性 色 * ) 


图 14-23 “新 建 图 层 ” 对 话 框 


图 14-24 新 建 图 层 


2. 复制 、 删 除 图 层 

利用 “复制 图 层 ” 命 令 ， 可 以 在 同一 幅 

图 像 中 复制 包括 背景 图 层 在 内 的 所 有 图 层 或 
图 层 组 ， 也 可 以 将 它们 从 一 幅 图 像 复制 到 另 
一 幅 图 像 。 
在 图 像 间 复制 图 层 时 ， 一 定 要 记 住 复制 
图 层 在 目标 图 像 中 的 打印 尺寸 决定 于 目标 图 
像 的 分 辨 率 。 如 果 原 图 像 的 分 辩 率 低 于 目标 
图 像 的 分 辩 率 ， 那 么 复制 图 层 在 目标 图 像 中 
就 会 显得 比 原来 小 ， 打 印 时 也 如 此 。 如 果 原 
图 像 的 分 辩 率 高 于 目标 图 像 的 分 状 率 ， 那 么 
复制 图 层 在 目标 图 像 中 就 会 显得 比 原来 要 大 ， 
打印 时 也 会 显得 比 原来 要 大 。 

在 “图 层 ” 面 板 中 选择 要 被 复制 的 图 层 
作为 当前 图 层 , 然后 执行 “图 层 ”|“ 复 制图 层 ” 
命令 ， 弹 出 “复制 图 层 ” 对 话 框 ， 如 图 14-25 
所 示 。 


5 Sy y 
e ~/B 六 
网 页 图 像 设 计 软件 Photoshop CC 


文档 ([D): 未 标题 -1 


图 14-25 “复制 图 层 ”对 话 框 


。 “为 ”: 为 复制 后 新 建 的 图 层 命名 ， 
系统 默认 的 名 字 会 随 着 目标 文档 的 不 
同 而 不 同 。 

。 “文档 ”: 选择 复制 的 目标 文件 ， 系 
统 默 认 的 选项 是 原 图 像 本 身 ， 选 定 它 
会 将 复制 的 图 层 又 粘贴 到 原 图 像 中 。 
如 果 在 Photoshop 中 同时 打开 了 其 他 
一 些 文件 ， 这 些 文件 的 名 字 会 在 “ 文 
档 ” 下 拉 列 表 中 列 出 ， 选 择 其 中 任意 
一 个 ， 就 会 将 复制 的 图 层 粘贴 到 选 定 
的 文件 中 。 

执行 “图 层 ”|“ 删 除 ”|“ 图 层 ” 命 令 ， 

弹出 如 图 14-26 所 示 的 对 话 框 ， 提 示 将 图 层面 
板 中 选 定 的 当前 工作 图 层 删除 。 


| 要 出 除 图 层 图 层 1 拷贝 3? 


EA) 


回 不 再 显示 


图 14-26 删除 图 层 确认 对 话 框 


14.3.2 ”使 用 图 层 样式 

图 层 样式 效果 非常 丰富 ， 以 前 需要 用 很 
多 步骤 制作 的 效果 在 这 里 设置 几 个 参数 就 可 
以 轻松 完成 。 图 层 样式 包含 许多 可 以 自动 应 
用 到 图 层 中 的 效果 ， 包 括 投 影 、 发 光 、 和 斜面 
和 浮雕 、 描 边 、 图 案 填 充 等 。 但 正 因为 图 层 
样式 的 种 类 和 设置 很 多 ， 很 多 人 对 它 并 没有 
全 面 的 了 解 ， 下 面 将 详细 讲解 Photoshop 的 图 
层 样式 面板 的 设置 及 效果 。 

当 应 用 了 一 个 图 层 样 式 时 ， 一 个 小 三 角 
和 一 个 f 图 标 就 会 出 现在 “图 层 ” 面 板 中 相应 
图 层 名 称 的 右 方 ， 表 示 这 一 图 层 含有 自动 效 
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果 ， 并 且 当 出 现 的 是 向 下 的 小 三 角 时 ， 还 能 
具体 看 到 该 图 层 到 底 被 应 用 了 哪些 自动 效果 。 
这 样 就 更 便于 用 户 对 图 层 效 果 进 行 管理 和 修 
改 ， 如 图 14-27 所 示 。 


图 14-27 应 用 图 层 样式 


执行 “图 层 ”|“ 图 层 样 式 ” 命 令 ， 出 现 
图 层 样 式 菜单 ， 如 图 14-28 所 示 。 


14.3.3 ”输入 文本 


在 Photoshop 中 可 以 输入 文本 ， 具 体操 作 
步骤 如 下 。 
01 打开 图 像 文件 “文本 jpg”， 选 择 工具 箱 
中 的 “ 横 排 文字 工具 ”， 如 图 14-29 所 示 。 
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图 14-29 打开 图 像 文件 


02 在 图 像 上 单 击 ， 即 可 输入 文字 ， 如 图 14-30 
所 示 。 


全 场 江 39 包 邮 


图 14-30 输入 文本 


14.3.4 ”设置 文本 格式 
在 创建 文字 的 过 程 中 或 者 创建 完成 后 ， 
只 要 还 没有 将 文字 与 其 他 图 层 合并 ， 就 可 以 
对 文字 的 格式 随时 进行 修改 ， 如 更 改 字体 、 
字号 、 字 距 、 对 齐 方式 、 颜 色 及 行距 等 。 
国 双击 选中 输入 的 文本 ， 如 图 14-31 所 示 。 


图 14-31 双击 选择 文本 


02 在 工具 选项 栏 中 “大 小 ”下 拉 列 表 中 设置 
字体 大 小 为 72， 如 图 14-32 所 示 。 


第 14 章 网 页 图 像 设 计 软 件 Photoshop CC 


变形 ”按钮 ， 弹 出 “变形 文字 ”对 话 框 ， 如 
图 14-35 所 示 。 主 要 包括 “样式 "“ 水 平 "“ 重 
直 ”、“ 弯 曲 ”、“ 水 平 扭曲 ”、“ 垂 直 扭曲 ”。 


加 水 平 (H) 看 直 (V) 


韵 曲 (B): 450 % 
下 水 平 扭曲 (O 
图 14-32 设置 文本 大 小 要 直 扭曲 (E)- 
本 在 工具 选项 栏 中 单 击 “ 设 置 字体 颜色 ”按钮 ， py 
弹出 “ 拾 色 器 (文本 颜色 ) ”对 话 框 ， 在 该 图 14-35 “变形 文字 ”对 话 框 


对 话 框 中 选择 相应 的 颜色 ， 如 图 14-33 所 示 。 下 面 讲述 如 何 设置 变形 文字 ， 具 体操 作 


开打 开 刚 才 制 作 的 图 像 文件 “文本 .psd”， 
选中 输入 的 文本 ， 如 图 14-36 所 示 。 


全 场 满 39 包 邮 


回 只 有 Web 颜色 
国 14 14-33 设置 字体 颜色 


三 在 工具 选项 栏 中 单 击 “ 设 置 字体 颜色 "按钮 ， 加 
弹出 “ 拾 色 器 ”对 话 框 ， 在 该 对 话 框 中 选择 9 


相应 的 颜色 ， 如 图 14-34 所 示 。 现在 工具 选项 栏 中 单 击 “ 创 建 变形 文字 ” 按 


钮 ， 弹 出 “变形 文字 ”对 话 框 ， 在 该 对 话 杠 
中 的 “样式 ”下 拉 列 表 中 选择 “膨胀 ”选项 ， 
如 图 14-37 所 示 。 


水 平 扭曲 (0): 


图 14-34 设置 字体 颜色 后 的 效果 as 


14.3.5 ”设置 变形 文字 图 14-37 “变形 文字 ”对 话 框 


使 用 “变形 文字 ”功能 可 以 使 文字 做 多 酯 单 击 “ 确 定 ”按钮 ， 即 可 创建 变形 文字 ， 
种 的 变形 。 在 工具 选项 栏 中 单 击 “ 创 建文 字 “如 图 14.38 所 示 。 
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全 此 文字 图 层 必须 横 格 化 后 才能 继续 。 其 文本 将 不 能 再 蝙 辑 。 是 否 棚 格 化 文字 了 


全 场 满 39 包 邮 条 的 eye 


0 单 击 “ 确定 ”按钮 , 显示 光照 效果 属性 面板 ， 
如 图 14-41 所 示 。 


图 14-38 创建 变形 文字 


14.3.6 “使 用 滤 镜 
应 用 滤 镜 可 以 带 来 各 种 各 样 的 艺术 效果 ， 
可 独立 发 挥 作用 ， 也 可 配合 其 他 滤 镜 效果 以 
取得 理想 的 效果 。 
吗 打 开 图 像 文件 文本 .psd”, 如 图 14-39 所 示 。 
EEC 汪 记 图 14-41 光照 效果 属性 


吗 调整 相关 参数 ， 设 置 光照 效果 ， 如 图 14-42 
所 示 。 


全 场 满 39 包 邮 


图 14-39 打开 图 像 文件 


本 执行 “ 滤 镜 ”|“ 风 格 化 ”| “光照 效果 ”命令 ， 
弹出 是 否 格式 化 文本 提示 框 , 如 图 14-40 所 示 。 


图 14-42 设置 光照 效果 


四 好 输出 图 修 
完成 图 片 的 处 理 后 ， 保 存 是 必 不 可 少 的 步骤 ， 否 则 之 前 的 操作 也 是 浪费 。 


14.4.1 ”Photoshop 常用 的 图 片 格式 

当 我 们 用 Photoshop 制作 或 处 理 好 一 幅 图 像 后 ， 就 要 对 其 进行 存储 。 这 时 ， 选 择 一 种 合适 
的 文件 格式 就 显得 十 分 重要 。 

在 Photoshop 中 我 们 会 接触 到 很 多 图 像 格 式 ， 下 面 将 对 Photoshop 中 常见 的 图 像 格 式 进行 
介绍 。 

1. PSD (.psd) 格式 

PSD 图 像 文件 格式 是 Photoshop 软件 生成 的 格式 , 是 唯一 能 支持 全 部 图 像 色 彩 模式 的 格式 ， 
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以 PSD 格式 保存 的 图 像 可 以 包含 图 层 、 通 道 
及 色彩 模式 。 虽 然 对 调节 层 、 文 本 层 的 图 像 
进行 了 适当 压缩 ， 但 图 像 文件 仍然 很 大 ， 比 
其 他 格式 的 图 像 文件 占用 更 多 的 磁盘 空间 。 

若 需 要 把 带 有 图 层 的 PSD 格式 的 图 像 转 
换 成 其 他 格式 的 图 像 文件 ， 需 先 将 图 层 合 并 ， 
然后 进行 转换 。 

一 般若 要 保留 图 像 数据 信 息 ， 以 便 下 次 
接着 编辑 ， 应 将 文件 保存 为 PSD 格式 。 若 图 
像 需要 出 片 ， 为 确保 不 失真 ， 一 般 也 将 其 保 
存 为 PSD 格式 。 

2. TIFF (.tf) 格式 

TIFF〈 标 签 图 像 文件 格式 ) 图 像 文件 格 
式 是 为 色彩 通道 图 像 创 建 的 最 有 用 的 格式 可 
以 在 许多 不 同 的 平台 和 应 用 软件 间 交 换 信息 ， 
应 用 相当 广泛 。 该 格式 支持 RGB、CMYK、 
Lab、INDEXED COLOR、BMP、 灰 度 等 色彩 
模式 ， 而 且 在 RGB、CMYK 及 灰 度 等 模式 中 
支持 Alpha 通道 的 使 用 。 一 般 大 多 数 扫 描 仪 
都 输出 TIFF 格式 的 图 像 文件 。 

当 用 户 在 Photoshop 中 将 图 像 文件 另存 为 
TIFF 格式 时 ， 系 统 将 显示 “TIFF Options” 对 
话 框 ， 要 求 用 户 选择 字 节 顺 序 ， 此 处 我 们 选 
择 “IBM PC”。 在 保存 为 TIFF 格式 时 ， 选 
择 “LZW Compression” (LZW 是 一 种 无 损 
压缩 方法 ) ， 可 对 图 像 文件 进行 压缩 ， 使 其 
占用 较 少 的 磁盘 空间 。 

3. GIF (.gif) 格式 

GIF 图 像 文件 格式 是 COMPUSERVE 提 
供 的 一 种 格式 ， 支 持 BMP、GRAYSCALE、 
INDEXED COLOR 等 色彩 模式 。 可 以 进行 
LZW 压缩 ， 缩 短 图 形 加 载 的 时 间 ， 使 图 像 文 
件 占用 较 少 的 磁盘 空间 。 

GIF 格式 文件 同时 支持 线 图 、 灰 度 和 索引 
图 像 。 只 要 软件 可 以 读 取 这 种 格式 ， 即 可 在 
不 同类 型 的 计算 机 上 使 用 。 

4. JPEG (*jpg) 

JPEG 的 英文 全 名 是 Jont Picture Expert 


@ 
Group〈 联 合 图 像 专家 组 ) ， 它 是 一 种 有 损 压 
缩 格式 。 此 格式 的 图 像 通 常用 于 图 像 预览 和 
一 些 超 文本 文档 中 (HTML 文档 ) 。JPEG 格 
式 的 最 大 特色 就 是 文件 比较 小 ， 可 以 进行 高 
倍率 的 压缩 ， 是 目前 所 有 格式 中 压缩 率 最 高 
的 格式 之 一 。 但 是 JPEG 格式 在 压缩 保存 的 过 
程 中 会 以 失 量 最 小 的 方式 丢掉 一 些 肉眼 不 易 
察觉 的 数据 。 因 而 保存 的 图 像 与 原 图 有 所 差 
别 ， 没 有 原 图 的 质量 好 ， 因 此 印刷 品 最 好 不 
要 用 此 图 像 格 式 。JPEG 格式 支持 CMYK、 
RGB 和 灰 度 的 颜色 模式 ， 但 不 支持 Alpha 通 
道 。 当 将 一 个 图 像 另存 为 JPEG 的 图 像 格式 时 ， 
会 打开 “JPEG Options” 对 话 框 ， 从 中 可 以 选 
择 图 像 的 品质 和 压缩 比例 ， 大 部 分 的 情况 下 
选择 “最 大 ”， 虽 然 压 缩 图 像 所 产生 的 品质 
与 原来 图 像 的 质量 差别 不 大 ， 但 文件 大 小 会 
减少 很 多 。 通 常情 况 下 要 存 成 网 络 格式 ， 以 
便 减 小 空间 提高 加 载 速 度 。 

5. PNG (*.png) 

PNG 格式 是 由 Netscape 公司 开发 出 来 的 
格式 ， 可 以 用 于 网 络 图 像 ， 但 它 不 同 于 GIF 
格式 的 图 像 ， 只 能 保存 256 色 ，PNG 格式 可 
以 保存 24 位 的 真 彩色 图 像 ， 并 且 支 持 透 明 背 
景 和 消除 锯齿 边缘 功能 ， 可 以 在 不 失真 的 情 
况 下 压缩 保存 图 像 。 但 由 于 PNG 格式 不 完全 
支持 所 有 的 浏览 器 ， 所 以 在 网 页 中 使 用 要 比 
GIF 和 JPEG 格式 少 得 多 。 但 相信 随 着 网 络 的 
发 展 和 因特网 传输 的 改善 ， PNG 格式 将 是 未 
来 网 页 中 使 用 的 一 种 标准 图 像 格 式 。PNG 格 
式 的 文件 在 RGB 灰 度 模式 下 支持 Alpha 通道 ， 
但 是 索引 颜色 位 图 模式 下 不 支持 Alpha 通道 。 
在 保存 PNG 格式 的 图 像 时 ， 会 弹出 对 话 框 ， 
如 果 在 对 话 框 中 选中 “Interlaced”【〔 交 错 的 ) 
单 选 按钮 ， 那 么 在 使 用 浏览 器 欣赏 该 图 片 时 
就 会 以 由 模糊 逐渐 转 为 清晰 的 方式 渐渐 显示 
出 来 。 

6. BMP 格式 

BMP 是 英文 Bitmap〈 位 图 ) 的 简写 ， 它 
是 Windows 操 作 系统 中 的 标准 图 像 文 件 格式 ， 
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能 够 被 多 种 Windows 应 用 程序 所 支持 。 随 着 
Windows 操作 系统 的 流行 与 丰富 的 Windows 
应 用 程序 的 开发 ，BMP 位 图 格式 理所当然 地 
被 广泛 应 用 。 这 种 格式 的 特点 是 包含 的 图 像 
信息 较 丰 富 ， 几 乎 不 进行 压缩 ， 但 由 此 导致 
了 它 与 生 俱 生来 的 缺点 一 一 占用 磁盘 空间 过 
大 。 所 以 ， 目 前 BMP 在 单机 上 比较 流行 。 


14.4.2 ”将 图 片 保存 为 PSD 格式 

将 图 片 保存 为 PSD 格式 的 具体 操作 步骤 
如 下 : 
呀 启动 Photoshop, 执行 “文件 |“ 打开 ”命令 ， 


打开 图 像 文件 “输出 图 像 jpg”， 如 图 14-43 
所 示 。 


Te 
a 版 藻 不 性 的 请 感 上 
全 


图 14-43 打开 图 片 


02 执行 “文件 ”| “另存 为 ”命令 ， 弹 出 “ 另 
存 为 ” 对话 框 , 在 该 对 话 框 中 单 击 “ 保 存 类 型 ” 
右边 的 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 
“Photoshop (*.psd; *.pdd) ”， 如 图 14-44 
所 示 。 


“另存 为 ”对 话 框 


图 14-44 
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03 单 击 “ 确 定 ” 按 钮 ， 即 可 将 其 存储 为 PSD 
格式 的 文件 ， 如 图 14-45 所 示 。 


图 14-45 保存 文件 


14.4.3 ”将 图 片 导出 为 JPG 格式 


JPG 格式 是 一 种 比较 常见 的 图 像 格 式 ， 
如 果 你 的 图 片 是 其 他 格式 ， 可 以 通过 执行 “ 文 
件 ”| “另存 为 ”命令 , 弹出 “另存 为 ”对 话 框 ， 
在 该 对 话 框 中 单 击 “ 保 存 类 型 ”右边 的 下 拉 
按钮 ,在 弹出 的 下 拉 列 表 中 选择 “JPEG(*.JPG 
*JPEG; *.JPE) ”， 如 图 14-46 所 示 。 


NEw 息 / 汪 /一 /可 


NEW We 


“另存 为 ”对 话 框 


14-46 


14.4.4 ”将 图 片 导出 为 GIF 格式 


GIF 分 为 静态 GIF 和 动画 GIF 两 种 ， 扩 
展 名 为 .gif， 是 一 种 压缩 位 图 格式 。GIF 动态 
图 (27 张 ) 支持 透明 背景 图 像 ， 适 用 于 多 种 
操作 系统 ，“ 体 形 ” 很 小 ， 网 上 很 多 小 动画 
都 是 GIF 格式 。 执 行 “ 文 件 ”| “另存 为 ” 命令 ， 


弹出 “另存 为 ”对 话 框 ， 在 该 对 话 框 中 单 击 “ 保 存 类 型 ”右边 的 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 
中 选择 “Compuserve GIF (*.GIF) ”， 如 图 14-47 所 示 。 


dd -DEM DCS:”.DIC) 
因 掠 风 台 栅 符 。 Photoshop EPS (EpS) 
Photoshop DCS 1D (CEpS) 


JPEG 2000 (JPF"JPX7JP27J2CJ2KTJPG 
BT jpeG 立体 (JPS) 
直 二 乐 PCKCPCM 
Photoshop POF CDFrppP) 
Raw PRA 


RE 
丰 丛 蝇 作 为 下 sm 
RN) 
Aiphe 通 二 (日 
ED) 
ES 


图 14-47 “另存 为 ”对 话 框 


综合 实战 


下 面 将 通过 实例 讲述 如 何 使 用 Photoshop 绘图 工具 和 文本 工具 来 制作 网 页 中 的 图 像 。 


实战 1 一 一 绘制 天 气 图 标 
下 面 使 用 Photoshop 绘制 天 气 图 标 ， 效 果 如 图 14-48 所 示 ， 具 体操 作 步 又 如 下 : 


最 终 文件 ， | 最 终 文件 /CH14/ 天 气 .psd 


名 称 (N): 未 标题 -1 
预 设 (P); 自 定 


寞 度 (W): 500 
高 度 (H): 3 


分 状 奈 (R): 72 钨 素 / 英 十 
蔬 色 模式 (M): RGB 颜色 ~ 8 位 
背景 内 容 (O: 白色 


高 级 


图 14-49 “新 建 ” 对 话 框 


”本 单 击 “ 确 定 ” 按 钮 ， 新 建 空白 文档 ， 如 图 
”14-50 所 示 。 

三 选 择 工具 箱 中 的 “渐变 工具 ”， 在 工具 选 
面 执行 “文件 ” |“ 新 建 ” 命 令 ， 弹 出 “新 建 ” 项 栏 中 单 击 “点 按 可 编辑 渐变 ”按钮 ， 弹出 “ 渐 
对 话 框 ， 在 该 对 话 框 中 将 “ 宽 ” 设 置 为 500、 ， 变 编辑 器 ”对 话 框 ， 在 该 对 话 框 中 设置 渐变 
“高 ”设置 为 400， 如 图 14-49 所 示 。 颜色， 如 图 14-51 所 示 。 


图 14-48 天 气 图 标 
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图 14-50 新 建文 档 


名 IN) 自 定 
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图 14-51 “渐变 编辑 器 ”对 话 框 
咀 单 击 “ 确 定 ” 按 钮 ， 设 置 渐变 颜色 ， 在 舞 
台中 按 住 鼠 标 左 键 绘制 渐变 , 如 图 14-52 所 示 。 
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图 14-52 绘制 渐变 


5 选择 工具 箱 中 的 “椭圆 工具 ”， 在 工具 选 
项 栏 中 将 颜色 设置 为 黑色 ， 在 舞台 中 绘制 椭 
圆 ， 如 图 14-53 所 示 。 
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图 14-53 绘制 椭圆 


中 执行 “ 滤 镜 ”|“ 演 染 ”|“ 镜 头 光 晕 ” 命 令 ， 
弹出 “Adobe Photoshop CC” 提 示 框 ， 提 示 是 
否 格 删 化 形状 ， 如 图 14-54 所 示 。 


后 t 直 理 。 是 下 符 it 
CC mw 


图 14-54 提示 框 


叹 单 击 “ 确 定 ” 按 钮 , 打开 “镜头 光 晕 ”对 话 框 ， 
如 图 14-55 所 示 。 


针头 类 型 
加 50-300 误 米 变焦 立 ) 
35 襄 米 紧 焦 人 k) 


图 14-55 


“镜头 光 尝 ”对 话 杠 
吗 单 击 “ 确 定 ” 按 钮 ， 完 成 镜头 光 晕 效果 的 
设置 ， 如 图 14-56 所 示 。 

09 选中 图 层 右 击 鼠 标 ， 在 混合 模式 下 拉 列 表 
中 选择 “ 滤 色 ”选项 ， 如 图 14-57 所 示 。 


本 。 司 员 
对 六 ” 


图 14-57 选择 


0 选择 “ 滤 色 ”选项 以 后 ， 去 除 黑 底 ， 如 图 


14-58 所 示 。 
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图 14-58 去 除 黑 底 


向 选择 工具 箱 中 的 “ 椭 


圆 工具 ”， 在 了 
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项 栏 中 将 颜色 设置 为 黄色 ， 在 舞台 中 绘制 椭 
圆 ， 如 图 14-59 所 示 。 


图 14-59 绘制 椭圆 


号 选中 图 层 后 单 击 鼠标 右键 ， 在 弹出 的 快捷 
菜单 中 选择 “格式 化 图 层 ” 命 令 ， 如 图 14-60 
所 示 。 


转换 为 智能 对 急 


图 14-60 “格式 化 图 层 ” 命 令 


贸 选择 工具 箱 中 的 “ 魔 棒 工 具 ”， 在 舞台 中 
单 击 以 选择 区 域 ， 如 图 14-61 所 示 。 


图 14-61 选择 区 域 


责 执 行 “选择 ” | “修改 ” | “2 命令 ， 弹 
出 “羽化 选区 ”对 话 框 ， 将 “羽化 半径 ” 设 
置 为 30， 如 图 14-62 所 示 。 


羽化 半径 (R): 30 像素 We | 
图 14-62 “羽化 选区 ”对 话 框 


呆 单 击 “ 确 定 ” 按 钮 ， 羽 化 选区 。 按 键盘 上 
的 Delete 键 删除 选区 ， 如 图 14-63 所 示 。 


图 14-65 设置 图 层 样式 


本 选中 “椭圆 2” 图 层 将 其 拖 到 “新 建 图 层 ” 
按钮 上 ， 复 制图 层 ， 如 图 14-66 所 示 。 
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图 14-63 删除 区 域 


呈 执 行 “ 图 层 ”|“ 图 层 样式 ”|“ 外 发 光 ” 命令， 
弹出 “图 层 样 式 ” 对 话 框 ， 如 图 14-64 所 示 。 图 14-66 复制 图 层 


rr s 三 执行 “ 滤 镜 ”| “模糊 ” | “ 方 框 模糊 ”命令 ， 


[Ee 


打开 “ 方 框 模 糊 ” 对 话 框 ， 如 图 14-67 所 示 。 


团 预 星 (P) 


图 14-64 “图 层 样式 ”对 话 框 
笃 单 击 “ 确 定 ” 按 钮 ， 添 加 图 层 样 式 ， 如 图 


14-65 所 示 。 Ta 
图 14-67 “ 方 框 模糊 ”对 话 框 
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20 单 击 “ 确 定 ” 按 钮 , 即 可 成 功 添加 模糊 效果 ， 
如 图 14-68 所 示 。 
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图 14-68 添加 模糊 效果 


实战 2 一 一 立体 质感 的 3D 文字 
下 面 讲述 具有 立体 感 的 3D 文字 的 制作 ， 
效果 如 图 14-69 所 示 ， 具 体操 作 步 又 如 下 : 


图 14-69 立体 3D 文字 


原始 文件 ， | 原始 文件 /CH14/ 立体 字 .jpg 
最 终 文件 ， | 最 终 文件 /CH14/ 立体 字 .psd 


0 吧 执行 “文件 ” |“ 打开 ”命令 ， 打 开 图 像 文 
件 “ 立 体 字 jpg”， 如 图 14-70 所 示 。 


图 14-70 打开 图 像 文件 
虽 选择 工具 箱 中 的 “ 直 排 文字 工具 ”， 在 工 


有 具 选项 栏 中 将 字体 设置 为 “宋体 ”、 字 体 大 


小 设置 为 100, 在 舞台 中 输入 文字 “璀璨 珠宝 ”， 
如 图 14-71 所 示 。 


图 14-71 输入 文本 


玛 打 开 “ 图 层 ” 面板, 选中 “璀璨 珠宝 ”图 层 ， 
将 其 拖 动 到 “新 建 图 层 ” 按 钮 上 上， 复制 出 图 
层 “ 璀 璨 珠宝 拷贝”， 如 图 14-72 所 示 。 
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填充 
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图 14-72 复制 图 层 


蚂 选 中 图 层 “ 璀 瑰 珠宝 拷贝 ”执行 “图 层 痒 图 
层 样式 ”| “渐变 县 加 ”命令 ,弹出 “图 层 样式 ” 
对 话 框 ， 如 图 14-73 所 示 。 


图 14-73 


“图 层 样式 ”对 话 杠 
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枉 在 该 对 话 框 中 单 击 “ 渐 变 ”右边 的 按钮 ， ， 框 中 单 击 “ 渐 变 ”右边 的 按钮 ， 弹 出 “渐变 
弹出 “渐变 编辑 器 ”对 话 框 ， 在 该 对 话 框 中 编辑 器 ”对 话 框 ， 在 该 对 话 框 中 选择 相应 的 


选择 相应 的 渐变 颜色 ， 如 图 14-74 所 示 。 渐变 颜色 ， 如 图 14-78 所 示 。 


EE | 


名 称 (N): 。 杠 , 黄 , 覃 新 变 


潮 变 类 型 (T): 实 底 ~ 
平滑 度 (M); 100 ，% 


图 14-74 “渐变 编辑 器 ”对 话 框 


西单 击 “ 确 定 ” 按 钮 , 设置 渐变 颜色 。 选中 “内 
发 光 ” 复 选 框 ， 在 弹出 的 对 话 框 中 设置 相应 
的 参数 ， 如 图 14-75 所 示 。 


站 光 
引 构 
所 各 村 式 四， 下 名 ~ 
不 允 虹 硕 (O): em 面 
#00: 日 
a oC Ee) 
加 过 
to: FE 
要: 口 忆 中。 回力 (9 
朋 本 (9: 个 5 
A EF 


su: [A] Fait 
IE: 豆 
1 


Riis 蓝 , 红 , 贡 新 交 
设置 为 慰 认 秸 。 | 喜 位 为 SA 全 


渐变 类 型 (T): 交底 ~ 
平 测度 (M): 100 这 


图 14-75 “内 发 光 ” 选 项 


07 单 击 “ 确 定 ” 按 钮 ， 给 图 层 添加 图 层 样式 ， 
如 图 14-76 所 示 。 

08 选择 “璀璨 珠宝 ”图 层 ， 用 键盘 上 的 方向 
键 向 左 移 动 ， 使 其 具有 立体 感 ， 如 图 14-77 
所 示 。 图 14-78 “渐变 编辑 器 ”对 话 框 
09 执行 “图 层 ”|“ 图 层 样式 ”| “渐变 有 到 加 ” ， 面 单 击 “ 确 定 ” 按 钮 ， 给 图 层 添 加 图 层 样式 ， 
命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 在 该 对 话 “如 图 14-79 所 示 。 
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图 14-79 设置 图 层 样式 


本 章 小 结 


Photoshop 是 图 像 处 理 软件 ， 使 用 Photoshop 可 以 设计 网 页 的 整体 效果 图 、 绘 制 网 页 图 像 ， 
以 及 设计 网 页 特效 文字 和 按钮 等 本 章 重点 介绍 绘图 工具 的 使 用 ,文本 特效 的 制作 、 图 像 的 输入 。 
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第 1 了 9 章 ”页面 图 像 的 切割 与 优化 


切片 就 是 将 一 幅 大 图 像 分 割 为 一 些小 的 图 像 ， 然 后 在 网 页 中 通过 没有 间距 和 宽度 的 表格 重 
新 将 这 些小 的 图 像 拼 接 起 来 ， 成 为 一 幅 完整 的 图 像 。 这 样 做 可 以 减 小 图 像 的 大 小 ， 减 少 网 页 的 


下 载 时 间 ， 还 能 将 图 像 的 一 些 区 域 用 HTML 来 代替 。 


全 ”优化 页 面 图 像 全 ”创建 GIF 动画 
争 ”网 页 切片 输出 


优化 页 面 图 人 
网 页 优化 涉及 方方面面 ， 图 片 优化 则 是 其 中 重要 手段 之 一 ， 本 节 将 讲述 网 页 图 像 的 优化 。 


15.1.1 图 像 的 优化 
现在 的 网 站 均 大 量 使 用 图 片 ， 那 么 这 些 图 片 如 何 优化 才 好 呢 ? 
。 在 网 站 设计 之 初 ， 就 要 做 好 规划 ， 如 背景 图 片 如 何 使 用 等 ， 做 到 心中 有 数 。 
。 在 编辑 图 片 的 时 候 ， 要 做 好 裁剪 ， 只 展示 必要 的 、 重 要 的 及 同 内 容 相关 的 部 分 。 
。 在 输出 图 片 的 时 候 ， 图 片 大 小 要 设置 妥当 ， 长 宽 像素 设 成 所 需要 的 大 小 ， 不 要 输出 大 
图 片 ， 在 使 用 的 时 候 ， 再 指定 较 小 的 长 宽 ， 缩 放 图 片 。 
。 JPG 图 片 也 可 以 模糊 背景 ， 压 缩 的 时 候 可 以 压缩 得 更 多 。 
。 页面 上 的 边框 、 背 景 等 ， 尽 可 能 使 用 CSS 来 展示 ， 而 不 要 使 用 图 片 。 
。 ” 尽 可 能 地 使 用 PNG 格式 的 文件 ， 以 替代 过 去 常用 的 GIF 和 JPG 格式 。 在 保证 质量 的 
情况 下 ， 用 最 小 的 文件 。 
。 在 HIML 中 明确 指定 图 片 的 大 小 。 
。 对 于 GIF 和 PNG 格式 的 文件 ， 最 小 化 颜色 位 数 。 
。 如 果 图 片上 要 添加 文字 ， 不 要 把 文字 嵌入 到 图 片 中 ， 而 是 采用 透明 背景 图 片 ， 或 者 通 
过 CSS 定位 让 文字 覆盖 在 图 片上 ， 既 能 获得 相同 的 效果 , 还 能 把 图 片 更 大 程度 地 压缩 。 
。 在 较 小 的 GIF 和 PNG 图 片上 ， 可 以 使 用 有 损 压 缩 。 
。 尽 可 能 使 用 局 部 压缩 ， 在 保证 前 景 清楚 的 基础 上 ， 较 大 程度 地 压缩 背景 。 
。 在 优化 图 片 之 前 ， 若 能 降 噪 的 话 ， 可 以 获得 额外 的 20% 多 的 压缩 。 


15.1.2 输出 图 像 


当 我 们 制作 完成 一 张 图 片 后 需要 将 它们 进 
行 保存 ， 以 备 未 来 使 用 ， 这 时 就 需要 对 图 片 进 
行 存储 ， 在 存储 的 时 候 也 会 相应 地 出 现 一些 文 
件 格式 待 选 择 。 启 动 Photoshop, 执行 “文件 六 另 
存 为 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 该 对 
话 框 中 选择 文件 存储 的 位 置 ， 如 图 15-1 所 示 ， 
单 击 “ 确 定 ” 按 钮 ， 即 可 保存 图 像 。 


图 15-1 


“另存 为 ”对 话 框 


15.1.3 ”输出 透明 GIF 图 像 
怎样 从 Photoshop 输出 透明 背景 的 GIF 图 

像 ， 是 很 多 初学 者 碰 到 的 问题 ， 下 面 就 来 讲 

述 输出 透明 GIF 图 像 的 方法 。 

面 执行“ 文件 ” |“ 打开 ”命令 ， 打 开 图 像 文 

件 “ 透 明 jpg”， 如 图 15-2 所 示 。 


图 15-2 打开 图 像 文件 
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叹 在 “图 层 ?面板 中 双击 “背景 图 层 , 弹出 “新 
建 图 层 ” 对 话 框 ， 如 图 15-3 所 示 。 


模式 (M): 正常 > 不 透明 度 (0): 100 ，% 


图 15-3 “新 建 图 层 ” 对 话 框 


03 单 击 “ 确 定 ” 按 钮 ， 解 锁 图 层 ， 如 图 15-4 
所 示 。 


图 15-4 解锁 图 层 


吗 在 工具 箱 中 选择 “ 魔 棒 工 具 ”， 在 工具 选 
项 栏 中 将 “ 容 差 ”设置 为 32， 在 舞台 中 单 击 
以 选择 相应 区 域 ， 如 图 15-5 所 示 。 


图 15-5 选择 区 域 


05 按键 盘 上 的 Delete 键 ， 即 可 删除 背景 ， 使 
其 成 为 透明 图 像 ， 如 图 15-6 所 示 。 
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呈 单 击 “ 确 定 ” 按 钮 ,弹出 “将 优化 结果 存储 为 ” 
对 话 框 ， 如 图 15-8 所 示 。 


图 15-6 删除 背景 pe i 于 

咕 执 行 “文件 |“ 存储 为 Web 所 用 格式 ”命令 ， nl 
弹出 “存储 为 Web 所 用 格式 ”对 话 框 , 将 “ 预 = - 一 
设 ” 设 置 为 GIF， 如 图 15-7 所 示 。 图 15-8 “将 优化 结果 存储 为 ”对 话 框 
”08 单 击 “ 确 定 ” 按 钮 ， 即 可 输出 图 像 ， 如 图 
= 3 15-9 所 示 。 

| es 上 I + wl 车 | 

图 15-7 “存储 为 Web 所 用 格式 ”对 话 框 图 15-9 输出 图 像 


网 页 切片 输出 


切片 是 网 页 制作 过 程 中 非常 重要 的 一 个 步骤 , 往往 切片 的 正确 与 否 会 影响 着 网 页 的 后 期 制 
作 。 一 般 是 用 Photoshop 对 网 页 的 效果 图 或 者 大 幅 的 图 片 进行 切割 。 


15.2.1 创建 切片 

“切片 工具 ”是 Photoshop 软件 自 带 的 一 
个 平面 图 片 切割 工具 。 使 用 “切片 工具 ”可 
以 将 一 个 完整 的 图 像 切割 成 许多 小 图 片 ， 以 
便于 网 络 上 的 下 载 。 创 建 切片 的 具体 操作 步 
又 如 下 ; 
呀 打开 图 像 文 件 “ 切 片 jpg”， 选 择 工具 箱 
中 的 “切片 工具 ”， 如 图 15-10 所 示 。 a 
02 将 光标 置 于 要 创建 切片 的 位 置 ， 按 住 鼠 标 图 15-10 选择 切片 工具 
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左 键 拖 动 ， 拖 动 到 合适 的 切片 大 小 绘制 切片 ， 
如 图 15-11 所 示 。 


图 15-11 绘制 切片 


15.2.2 ”编辑 切片 

如 果 切 片 大 小 不 合适 ， 还 可 以 调整 和 编 
辑 切 片 ， 具 体操 作 步 骤 如 下 : 

吧 打开 创建 好 切片 的 图 像 文件 ， 单 击 鼠 标 右 
键 在 弹出 的 快捷 菜单 中 选择 “划分 切片 ”命令 ， 
如 图 15-12 所 示 。 


图 15-12 选择 “划分 切片 ”命令 


唱 弹 出 “划分 切片 ?对话 框 , 将 划分 切片 的 “ 垂 
直 划 分 为 ”设置 为 5， 如 图 15-13 所 示 。 


本 8(W) 


可 重 直 划分 为 
® 个 机 向 切片 ,均匀 分 隔 


图 15-13 “划分 切片 ”对 话 框 


03 单 
所 示 。 


“确定 ”按钮 ， 划 分 切片 ， 如 图 15-14 


ET 


图 15-14 划分 切片 


三 在 图 像 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜 
单 中 选择 “编辑 切片 选项 ”命令 ， 弹 出 “ 切 
片 选项 ”对 话 框 ， 在 对 话 框 中 可 以 设置 切片 
的 URL、 目标 、 信息 文本 等 , 如 图 15-15 所 示 。 
二 | 


切片 类 型 (5): 图 像 
ND): 
URLU): 
目标 (R) 

信息 文本 (M) 

At ia(A): 


尺 十 
XX): WW) 


YY 0 HH): 116 


切片 背景 类型 (L) 无 


图 15-15 “切片 选项 ”对 话 框 


15.2.3 ”优化 和 输出 切片 

使 用 “存储 为 Web 所 用 格式 ”命令 可 以 
导出 和 优化 切片 图 像 ，Photoshop 会 将 每 个 切 
片 存 储 为 单独 的 文件 并 生成 显示 切片 图 像 所 
需 的 HIML 或 CSS 代码 。 
加 选择 工具 箱 中 的 “切片 工具 ”， 在 舞台 中 
绘制 好 切片 ， 如 图 15-16 所 示 。 
吗 执 行 “文件 ?| 存储 为 Web 所 用 格式 ”命令 ， 
弹出 “存储 为 Web 所 用 格式 ”对 话 框 ， 在 对 
话 框 中 各 个 切片 都 作为 独立 的 文件 存储 ， 并 
具有 各 自 独立 的 设置 和 颜色 调 板 ， 如 图 15-17 
所 示 。 
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图 15-18 “将 优化 结果 存储 为 ”对 话 框 


吗 单 击 “ 保 存 ” 按 钮 ， 同 时 创建 一 个 文件 
夹 ， 用 于 保存 各 个 切片 生成 的 文件 。 双 击 “ 切 
片 html” 打 开 Web 页 面 ， 如 图 15-19 所 示 。 


i | 
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图 15-17 “存储 为 Web 所 用 格式 ”对 话 框 
03 单 击 “ 存 储 ” 按 钮 ,弹出 “将 优化 结果 存储 为 ” : 
对 话 框 ,在 对 话 框 中 设置 保存 的 位 置 和 和 名称， “| 

如 图 15-18 所 示 。 图 15-19 浏览 网 页 


创建 GIF 动画 

动画 是 在 一 段 时 间 内 显示 的 一 系列 图 像 或 巅 ， 当 每 一 帧 较 前 一 帧 都 有 轻微 的 变化 时 ， 连 续 
快速 地 显示 帧 ， 就 会 产生 运动 或 其 他 变化 的 视觉 效果 。 
15.3.1 ”GIF 动画 原理 

GIF 动画 图 片 是 在 网 页 上 常常 看 到 的 一 种 动画 形式 ， 夯 面 活泼 生动 ， 引 人 注目 。 不 仅 可 以 
吸引 浏览 者 ， 还 可 以 增加 关注 及 点 击 率 。GIF 文件 的 动画 原理 是 ， 在 特定 的 时 间 内 显示 特定 画 
面 内 容 ， 不 同 面 面 连续 交替 显示 ， 产 生 了 动态 画面 效果 。 所 以 在 Photoshop 中 ， 主 要 使 用 动画 
面板 来 设置 、 制 作 GIF 动画 。 
15.3.2 ”认识 “时 间 轴 ”面板 

GIF 动画 制作 相对 较为 简单 ， 打 开 “ 时 间 轴 ” 面板 后 ， 会 发 现 有 由 动画 和 时 间 轴 动 画 两 各 
模式 可 以 选择 。 
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帧 动画 相对 来 说 直观 很 多 ， 在 动画 面板 
中 会 看 到 每 一 帧 的 缩 略 图 。 制 作 之 前 需要 先 
设 定好 动画 的 展示 方式 ， 然 后 用 Photoshop 做 
出 分 层 图 。 然 后 在 动画 面板 新 建 帧 ， 把 展示 
的 动画 分 帧 设置 好 ， 再 设 定 好 时 间 和 过 渡 等 ， 
即 可 播放 预览 。 

帧 动画 的 所 有 元 素 都 放置 在 不 同 的 图 层 
中 。 通 过 对 每 一 帧 隐藏 或 显示 不 同 的 图 层 可 
以 改变 每 一 帧 的 内 容 ， 而 不 必 一 遍 又 一 遍地 
复制 和 改变 整个 图 像 。 每 个 静态 元 素 只 需 创 
建 一 个 图 层 即 可 ， 而 运动 元 素 则 可 能 需要 若 
干 个 图 层 才能 制作 出 平滑 过 渡 的 运动 效果 。 
如 图 15-20 所 示 的 是 “时 间 轴 ”面板 。 


图 15-20 “时 间 轴 ”面板 


15.3.3 创建 GIF 动画 

GIF 动画 是 较为 常见 的 网 页 动画 。 这 种 动 
画 的 特点 : 它 是 以 一 组 图 片 的 连续 播放 来 产 
生动 态 效果 ， 这 种 动画 是 没有 声音 的 。 当 然 
制作 GIF 动画 的 软件 有 很 多 ， 最 常用 的 就 是 
Photoshop， 下 面 使 用 Photoshop 制作 帧 动画 ， 
如 图 15-21 所 示 为 其 中 的 两 帧 动画 。 具 体操 作 
步骤 如 下 : 


图 15-21 GIF 动画 


国 执行“ 文件 ”|“ 打 开 ” 命 令 ， 打 开 图 像 文 
件 “1.jpg”， 如 图 15-22 所 示 。 

草 执 行 “窗口 ”| “时间 轴 ” 命 令 , 打开 “时 间 轴 ” 
面板 , 在 “时 间 轴 ”面板 中 自动 生成 一 帧 动画 ， 
如 图 15-23 所 示 。 


(9 Oo 
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图 15-22 打开 图 像 文件 


图 15-23 其 中 一 帧 


三 单 击 “时 间 轴 ”面板 底部 的 “复制 所 选 帧 ” 
按钮 国 ， 复 制 当前 帧 ， 如 图 15-24 所 示 。 


SS 3》 AK p's 


图 15-24 复制 帧 


0 使 用 同样 的 方法 再 复制 一 帧 ， 如 图 15-25 
所 示 。 


图 15-25 复制 帧 
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西 执行 “文件 ”|“ 置 入 ”命令 ， 弹 出 “ 置 
入 ”对 话 框 ， 在 对 话 框 中 选择 要 置 入 的 文件 
“2jpg”， 如 图 15-26 所 示 。 


图 15-26 


06 单 击 “ 置 入 ”按钮 ， 将 “2.jpg” 文 件 置 入 ， 
并 调整 置 入 文件 的 大 小 与 原来 的 背景 图 像 大 
小 一 样 ， 如 图 15-27 所 示 。 


图 15-27 置 入 图 像 


吗 按 步骤 05 一 06 的 方法 置 入 图 像 文件 
“3.jpg”， 如 图 15-28 所 示 。 


图 15-28 置 入 图 像 
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酌 在 “时 间 轴 ”面板 中 选择 第 1 帧 ,在 “图 
层 ” 面 板 中 ， 将 “2” 和 “3” 图 层 隐 藏 ， 如 
图 15-29 所 示 。 


“图 层 ” 面 板 


图 15-29 
09 在 “时 间 轴 ”面板 中 选择 第 1 帧 ， 单 击 该 
帧 右 下 角 的 三 角 按 钮 ， 设 置 延迟 时 间 为 1 秒 ， 

如 图 15-30 所 示 。 


图 15-30 设置 延迟 时 间 


而 同样 设置 第 2 帧 的 延迟 为 2 秒 ， 在 “图 层 ” 
面板 中 , 将 “背景 ”图 层 和 “3” 图 层 隐藏 ，“2” 
图 层 可 见 ， 如 图 15-31 所 示 。 


背景 ”图 层 和 “3” 图 层 隐 藏 


7 涡 
第 15 章 页 面 图 像 的 切割 与 优化 (7 ov 


别 同样 设置 第 3 帧 的 延迟 为 2 秒 ， 在 “图 层 ” 面 板 中 ， 将 “背景 ”图 层 和 “2” 图 层 隐 藏 ，“3?” 
图 层 可 见 ， 如 图 15-32 所 示 。 
鲍 单 击 “ 动 画 ” 面 板 底部 的 “播放 动画 ”按钮 转播 放 动 画 ， 如 图 15-33 所 示 。 


图 15-32 将 “背景 ” 层 和 “2” 图 层 隐 藏 图 15-33 播放 动画 


综合 实战 

制作 用 于 在 Web 上 发 布 的 图 像 需 要 对 它 进行 优化 ， 必 须 保证 文件 的 尺寸 尽 可 能 地 小 。 
实战 1 一 一 在 Photoshop 中 优化 图 像 

在 Photoshop 中 优化 图 像 的 具体 操作 步骤 如 下 : 
于 执行 “文件 ” |“ 打开” 命令， 打开 图 像 文件 ， 如 图 15-34 所 示 。 


吗 执 行 “ 文 件 ”| “存储 为 Web 所 用 格式 ”命令 , 打开 “存储 为 Web 所 用 格式 ”对 话 框 , 单 击 “ 四 
联 ”， 然 后 选择 第 4 幅 图 像 ， 如 图 15-35 所 示 。 


十 -| @@ 辣 [m= me ] 于 


图 15-35 “存储 为 Web 格式 ”对 话 框 


图 15-34 打开 图 像 文件 


0 单 击 “存储 ”按钮 ， 打 开 “ 将 优化 结果 存储 为 ”对 话 框 ， 如 图 15-36 所 示 。 
吗 单 击 “ 保 存 ” 按 钮 ， 即 可 优化 图 像 ， 如 图 15-37 所 示 。 
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图 15-36 “将 优化 结果 存储 为 ”对 话 框 


DG Dl RE 
,NASB 16 55 RI OE. 


WH, Mies, | 


图 15-37 优化 图 像 


实战 2 一 一 切割 输出 网 站 主页 

下 面 讲述 切割 网 站 封面 型 主页 ， 具 体操 
作 步 骤 如 下 : 
加 执行 “文件 "| 打开” 命令, 打 
如 图 15-38 所 示 。 


图 像 文件 ， 


图 15-38 打开 图 像 文件 


02 选择 工具 箱 中 的 “切片 工具 ”， 将 光标 置 
于 要 创建 切片 的 位 置 ， 按 住 鼠 标 左 键 拖 动 ， 
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拖 动 到 合适 的 切片 大 小 ， 即 可 绘制 切片 ， 如 
图 15-39 所 示 。 


Xingyunwan Ever, 


图 15-39 绘制 切片 


03 用 同样 的 方法 绘制 其 余 的 切片 ， 如 图 15-40 
所 示 。 


图 15-40 绘制 其 余 的 切片 
4 执行 “文件 ”|“ 存 储 为 Web 所 


格式 ”命令 ， 
弹出 “存储 为 Web 所 用 格式 ”对 话 框 ， 如 图 
15-41 所 示 。 


图 15-41 “存储 为 Web 所 用 格式 ”对 话 框 


第 15 章 ”页 面 图 像 的 切割 与 优化 “ 心 O(C 


号 单 击 “ 存 储 ” 按 钮 , 弹出 “将 优化 结果 存储 为 ”对 话 框 , 在 该 对 话 框 中 将 “格式 ”设置 为 “HTML 
和 图 像 ”， 如 图 15-42 所 示 。 
06 单 击 “ 保 存 ” 按 钮 ， 即 可 将 图 像 切 割 成 网 页 ， 如 图 15-43 所 示 。 
CE 

悍 有 在 四 明 采 建 文件 赤 ~ 全 让 加 四 > 


a 加 
设 订 二 提要 条件 ER 项 - 


Rp 
六 的 他 各 


EE 


轩 
EE 


图 15-42 “将 优化 结果 存储 为 ”对 话 框 图 15-43 切割 成 网 页 


本 章 小 结 


如 果 网 页 上 的 图 片 较 大 ， 浏 览 器 下 载 整个 图 片 的 话 需要 花 很 长 的 时 间 。 切 片 的 使 用 ， 使 得 
整个 图 片 可 以 分 为 多 个 不 同 的 小 图 片 分 开 下 载 ， 这 样 下 载 的 时 间 就 大 大 缩短 了 。 在 目前 互联 网 
带宽 还 受到 条 件 限制 的 情况 下 ， 运 用 切片 可 以 减少 网 页 下 载 时 间 ， 而 且 不 影响 图 片 的 效果 。 使 
用 Photoshop 还 可 以 轻松 地 制作 出 GIF 动画 。 通 过 本 章 的 学 习 ， 希 望 大 家 能 掌握 制作 动画 的 基 
本 方法 及 网 页 图 像 切 割 和 优化 方法 。 


第 了 6 章 设计 网 站 的 图 片 元 素 


Photoshop 应 用 最 广泛 的 领域 就 是 图 形 和 图 像 的 处 理 ， 这 是 


有 所 说 的 图 形 是 指 自 己 绘制 出 来 


的 ， 而 图 像 的 处 理 指 的 是 对 一 幅 已 经 有 的 图 片 进行 处 理 。 本 章 中 的 每 个 实例 都 使 用 了 不 同 的 功 


能 ， 希 望 读 者 在 学 习 的 时 候 能 够 不 断 自己 总 结 ， 以 便 最 快 地 进步 和 提高 。 


技术 要 点 
会 ”网 页 中 的 设计 元 素 全 设计 网 站 banner 
会 ”设计 网 站 LOGO 全 ”制作 网 页 导航 条 


网 页 中 的 设计 元 素 


网 页 中 的 元 素 有 很 多 ， 例 如 banner 条 、 文 本 框 、 导 航 栏 、 
对 独立 的 元 素 放 在 不 同 的 图 层 中 ， 这 样 方便 以 后 再 编辑 。 


6.L1 LOGO 


ks 


3 


图 形 标志 ， 代 表 一 个 网 站 或 网 站 的 一 个 板块 。 
LOGO 在 网 站 版 面 设计 中 是 必 不 可 少 的 ， 当 用 户 在 第 一 


LOGO、 广 告 等 。 尽 量 把 这 些 相 


LOGO 是 徽标 或 者 商标 的 英文 说 法 ， 起 到 对 公司 的 识别 和 推广 的 作用 ， 通 过 形象 的 LOGO 
可 以 让 消费 者 记 住 公司 主体 和 品牌 文化 。 网 络 中 的 LOGO 主要 是 各 个 网 站 用 来 与 其 他 网 站 链接 


时 间 进入 一 个 站 点 中 时 ， 网 站 


LOGO 无 疑 会 首先 进入 用 户 的 视线 。 这 时 如 果 LOGO 毫 无 吸引 力 ， 用 户 很 可 能 没有 什么 印象 ， 
直接 看 完 想 找 的 内 容 或 者 网 页 之 后 就 直接 关闭 了 网 页 ， 相 反 如 果 LOGO 设计 得 很 吸引 人 ， 让 


人 看 起 来 就 容易 记 住 这 个 网 站 ， 通 过 LOGO 就 可 以 表现 出 这 个 网 站 的 内 涵 。 可 见 一 个 网 站 的 
LOGO 是 多 么 重要 ， 再 漂亮 的 页 面 如 果 没有 一 个 让 人 眼前 一 亮 的 LOGO 那 也 是 比较 失败 的 。 


构成 LOGO 的 各 部 分 ， 一 般 都 具有 一 种 共通 性 及 差异 性 ， 这 个 差异 性 又 称 为 独特 性 ， 或 称 


为 变化 ， 而 统一 是 将 多 样 性 提炼 为 一 个 主要 表现 体 ， 称 为 多 样 统一 的 原理 。 精 确 把 握 对 象 的 多 


样 统一 并 突出 支配 性 要 素 ， 是 设计 网 络 LOGO 的 必 备 技术 。 


适当 的 关联 ， 并 具备 类 似 的 风格 造型 。 
16.1.2 ”导航 栏 


本 络 LOGO 所 强调 的 辨别 性 及 独特 性 ， 要 求 相关 图 案 字 体 的 设计 也 要 和 被 标识 体 的 性 质 有 


站 的 导航 栏 指 的 是 引导 用 户 访问 网 站 的 栏目 、 菜 单 、 在 线 帮助 、 分 类 等 布局 结构 等 形式 


的 总 称 。 在 网 站 的 建设 过 程 中 ， 一 定 要 使 网 站 导航 结构 清晰 ， 能 够 使 访问 者 在 最 短 的 时 间 内 找 
到 自己 喜欢 的 内 容 。 导 航 便于 提升 网 站 内 的 用 户 操作 和 浏览 ， 也 便于 搜索 引擎 目录 索引 和 识别 。 


16.1.3 ”页 面 布局 区 


网 页 最 初 呈现 在 你 面前 时 ， 它 就 好 像 一 张 白 纸 ， 需 要 任意 挥洒 你 的 设计 才思 。 首 先 要 了 解 
约定 俗 成 的 标准 或 者 说 大 多 数 访问 者 的 浏览 习惯 ， 在 此 基础 上 加 上 自己 的 东西 ， 创 造 出 自己 的 
设计 方案 ， 作 为 初学 者 ， 最 好 明白 网 页 布局 的 基本 概念 。 

1. 页 面 尺 十 

由 于 页 面 尺寸 和 显示 器 大 小 及 分 辨 率 有 关系 ， 网 页 的 局 限 性 就 在 于 你 无 法 突破 显示 器 的 
范围 ， 而 且 因 为 浏览 器 也 将 占 去 不 少 空 间 ， 留 下 给 你 的 页 面 范围 变 得 更 小 。 一 般 分 辩 率 在 
800X600 的 情况 下 ， 页 面 的 显示 尺寸 为 780X428 个 象 素 ， 分 辨 率 在 640X480 的 情况 下 
页 面 的 显示 尺寸 为 620X311 个 象 素 ， 分 辩 率 在 1024X768 的 情况 下 ， 页 面 的 显示 尺寸 为 
1007X600。 从 以 上 数据 可 以 看 出 ， 分 辨 率 越 高 ， 页 面 尺寸 越 大 。 

浏览 器 的 工具 栏 也 是 影响 页 面 尺寸 的 原因 。 目 前 的 浏览 器 工具 栏 一 般 都 可 以 取消 或 者 增加 ， 
那么 当 你 显示 全 部 的 工具 栏 和 关闭 全 部 工具 栏 时 , 页 面 的 尺寸 是 不 一 样 的 。 在 网 页 设计 过 程 中 ， 
向 下 拖 动 页 面 是 唯一 给 网 页 增加 更 多 内 容 (尺寸 ) 的 方法 。 但 前 提 是 站 点 的 内 容 能 吸引 大 家 拖 
动 ， 否 则 不 要 让 访问 者 拖 动 页 面 超 过 三 屏 。 

2. 整体 造型 

造型 就 是 创造 出 来 的 物体 形象 ， 这 里 是 指 页 面 的 整体 形象 。 这 种 形象 应 该 是 一 个 整体 ， 图 
形 与 文本 的 接合 应 该 层 营 有 序 。 虽 然 ， 显 示 器 和 浏览 器 都 是 和 矩形， 但 对 于 页 面 的 造型 ， 你 可 以 
充分 运用 自然 界 中 的 其 他 形状 ， 以 及 它们 的 组 合 ， 例 如 矩形、 圆 形 、 三 角形 、 萎 形 等 。 

对 于 不 同 的 形状 ， 它 们 所 代表 的 意义 是 不 同 的 。 比 如 和 矩形 代表 着 正式 、 规 则 ， 很 多 ICP 和 
政府 网 页 都 以 矩形 为 整体 造型 ， 圆 形 代表 着 柔和 、 团 结 、 温 暖 、 安 全 等 ， 许 多 时 尚 站 点 喜欢 以 
圆 形 为 页 面 整体 造型 ， 三 角形 代表 着 力量 、 权 威 、 牢 固 、 侵 略 等 ， 许 多 大 型 的 商业 站 点 为 显示 
它 的 权威 性 ， 常 以 三 角形 为 页 面 整 体 造型 ， 萎 形 代表 着 平衡 、 协 调 、 公 平 ， 一 些 交友 站 点 常 运 
用 菱形 作为 页 面 整体 造型 。 虽 然 不 同形 状 代表 着 不 同 的 意义 ， 但 目前 的 网 页 制作 大 多 数 是 结合 
多 个 图 形 加 以 设计 ， 在 这 其 中 某 种 图 形 的 构图 比例 可 能 占 得 多 一 些 。 

3. 页 头 

页 头 又 可 称 为 页 眉 , 页 眉 的 作用 是 定义 页 面 的 主题 。 比 如 一 个 站 点 的 名 字 多 数 都 显示 在 页 眉 里 。 
这 样 ， 访 问 者 能 很 快 知道 这 个 站 点 是 什么 内 容 。 页 头 是 整个 页 面 设计 的 关键 ， 它 将 涉及 下 面 的 更 
多 设计 和 整个 页 面 的 协调 性 。 页 头 常 放置 站 点 名 字 的 图 片 和 公司 标志 及 旗帜 广告 。 

4. 文本 

文本 在 页 面 中 出 现 多 数 以 行 或 者 块 (段落 ) 的 形式 出 现 ， 它 们 的 摆 放 位 置 决定 着 整个 页 
面 布 局 的 可 视 性 。 过 去 因为 页 面 制作 技术 的 局 限 ， 文 本 放置 位 置 的 灵活 性 非常 小 ， 而 随 着 
DHTML 的 兴起 ， 文 本 已 经 可 以 按照 自己 的 要 求 放 置 到 页 面 的 任何 位 置 。 

5. 页 脚 

页 脚 和 页 头 相 呼应 。 页 头 是 放置 站 点 主题 的 地 方 ， 而 页 脚 是 放置 制作 者 或 者 公司 信息 的 地 
方 。 许 多 制作 信息 都 是 放置 在 页 脚 的 。 
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设计 网 站 LOGO 


利用 工具 进行 绘图 是 Photoshop 最 重要 的 功能 之 一 ， 


只 要 用 户 熟 练 掌握 这 些 工具 并 有 着 一 


定 的 美术 造型 能 力 ， 就 能 绘制 出 精美 的 作品 来 。 在 网 页 图 像 设计 中 会 经 常用 到 这 些 绘图 工具 ， 


熟练 掌握 绘图 工具 的 使 用 是 非常 必要 的 。 
16.2.1 网 站 LOGO 设计 标准 

设计 LOGO 时 ， 要 面向 其 应 用 的 各 种 条 
件 做 出 相应 的 规范 ， 对 指导 网 站 的 整体 建设 
有 着 极 现实 的 意义 。 具 体 包括 规范 LOGO 的 
标准 色 、 设 计 可 能 被 应 用 的 恰当 的 背景 配色 
体系 、 反 白 、 在 清晰 表现 LOGO 的 前 提 下 制 
定 LOGO 最 小 的 显示 尺寸 ， 为 LOGO 制定 一 
些 特定 条 件 下 的 配色 、 辅 助 色 带 等 ， 方 便 在 
制作 banner 等 场合 的 应 用 。 另 外 ， 应 注意 文 
字 与 图 案 边 缘 应 清晰 , 字 与 图 案 不 宜 相交 释 。 
还 可 考虑 LOGO 的 紧 排 效果 及 作为 背景 时 的 
排列 方式 等 。 

一 个 网 络 LOGO 不 应 只 考虑 在 高 分 辨 屏 
幕 上 的 显示 效果 ， 应 该 考虑 到 网 站 整体 发 展 
到 一 个 高 度 时 相应 推广 活动 所 要 求 的 效果 ， 
使 其 在 应 用 于 各 种 媒体 时 ， 也 能 发 挥 充分 的 
视觉 效果 。 同 时 ， 应 使 用 能 够 给 予 多 数 观 众 
wit 例如 ，LOGO 在 传真 、 

报纸 、 杂志 等 纸 介 质 上 的 单 色 效果 、 反 白 效 果 ， 
以 及 在 织物 上 的 纺织 效果 、 在 车 体 上 的 油漆 
效果 、 制 作 徽 章 时 的 金属 效果 、 墙 面 立体 的 
造型 效果 等 。 
16.2.2 ”实战 1 一 一 设计 网 站 LOGO 

下 面 通过 实例 讲述 网 站 LOGO 的 设计 ， 
如 图 16-1 所 示 ， 具 体操 作 步 骤 如 下 : 


获 矢 庙 19 竹 态 


图 16-1 网 站 LOGO 
最 终 文件 ，| 最终 文件 /CH16/LOGO.psd | 
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0 启动 Photoshop, 执行 “文件 ”|“ 新 建 ” 命 令 ， 
弹出 “新 建 ”对 话 框 ， 如 图 16-2 所 示 。 


名 称 (N): 未 标题 1 
预 设 (P); 自 定 


帘 诛 (W): 530 你 素 


高 度 (H 340 | 像 案 
分 养 硅 (R72 像素 | 英寸 ~ 
两 色 模 式 (M); RGB 颜色 ”vB 卫 
背景 内 容 (C; 白色 
济 高 各 
图 16-2 “新 建 ”对 话 框 


咀 单 击 “ 确 定 ” 按 钮 ， 新 建 空白 文档 ， 如 图 
16-3 所 示 。 


图 16-3 新 建文 档 


03 选择 工具 箱 中 的 “ 自 定形 状 工具 ”， 在 工 
具 选 项 栏 中 选择 “图 案 ” 选 项 ， 在 弹出 的 列 
表 框 中 选择 相应 的 图 案 ， 如 图 16-4 所 示 。 
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图 16-4 选择 相应 的 图 案 


吗 在 舞台 中 按 住 鼠标 左 键 绘制 形状 ， 如 图 
16-5 所 示 。 
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图 16-5 绘制 形状 


本 执行 “图 层 ”|“ 图 层 样式 ”|“ 描 边 ”命令 ， 
弹出 “图 层 样式 ”对 话 框 ， 将 描 边 颜色 设置 
为 #faff64， 如 图 16-6 所 示 。 
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图 16-6 “图 层 样式 ”对 话 框 


06 选中 “投影 ” 复 选 框 ， 设 置 投影 效果 ， 如 
图 16-7 所 示 。 
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图 16-7 设置 投影 效果 


吗 单 击 “ 确 定 ” 按 钮 ， 完 成 图 层 样 式 的 添加 ， 
效果 如 图 16-8 所 示 。 


图 16-8 添加 图 层 样式 的 效果 


08 选择 工具 箱 中 的 “ 自 定形 状 工 具 ”， 选 择 
合适 的 形状 ， 在 工具 选项 栏 中 将 填充 颜色 设 
置 为 #009944， 在 舞台 中 绘制 形状 ， 如 图 16-9 
所 示 。 
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图 16-9 绘制 图 形 


权 选择 工 具 箱 中 的 “ 横 排 文字 工具 ”， 在 舞 
台中 输入 文本 “向 阳 集 团 ”， 如 图 16-10 所 示 。 


T- rr 


图 16-10 设置 图 层 样式 


205 


0 执行 “图 层 ”|“ 图 层 样式 ”|“ 混 合 选项 ” ;全 单 击 “ 确 定 ”按钮 ， 添 加 图 层 样式 ， 效 果 
命令 ,打开 “图 层 样式 ”对 话 框 , 单 击 左 边 的 “ 样 ”如 图 16-12 所 示 。 

式 ” 选 项 ， 在 弹出 的 样式 列表 框 中 选择 合适 gpg s 
的 样式 ， 如 图 16-11 所 示 。 


Er 


图 16-12 添加 图 层 样式 的 效果 


图 16-11 “图 层 样 式 ”对 话 框 


有 设计 网 站 banner 

banner 是 网 站 页 面 的 横幅 广告 ，banner 主要 体现 网 站 中 心意 中， 形象 鲜明 地 表达 最 主要 的 
情感 思想 或 宣传 中 心 。 
16.3.1 什么 是 banner 


banner 又 叫 旗帜 ， 是 一 个 表现 商家 广告 内 容 的 图 片 ， 放 置 在 广告 商 的 页 面 上 ， 是 互联 网 广 
告 中 最 基本 的 广告 形式 。 标 准 尺 寸 是 480X 60 像素 ， 一 般 是 使 用 GIF、JPG 格式 的 图 像 文件 。 
同时 还 可 使 用 JAVA 等 语言 使 其 产生 交互 性 ， 用 Shockwave 等 插件 增强 表现 力 。 标 准 GIF 格式 
以 外 的 网 幅 广告 被 称 为 Rich Media banner。 


16.3.2 ”实战 2 一 一 设计 有 动画 效果 的 banner 
下 面 设计 有 动画 效果 的 banner， 效 果 如 图 16-13 所 示 。 具 体操 作 步 骤 如 下 : 


最 终 文 件 : | 最 终 文件 /CH16/banner.gif 


吗 执 行文 件 ?| 打开” 命令 , 打开 图 像 文 件 ， 
如 图 16-14 所 示 。 图 16-14 打开 图 像 文件 


02 打开 “图 层 ” 面 板 ， 双 击 “ 背 景 ” 图 层 ， 
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将 其 转 为 “图 层 0”， 如 图 16-15 所 示 。 


图 16-15 解锁 图 层 


吗 执 行 “ 窗 口 "|* 时间 轴 ? 命 令 , 打开 “时 间 轴 ” 
面板 ， 在 “时 间 轴 ”面板 中 自动 生成 一 帧 动 
画 ， 单 击 “ 时 间 轴 ”面板 底部 的 “复制 所 选 帧 ” 
按钮 图 ， 复 制 当 前 帧 ， 如 图 16-16 所 示 。 


图 16-16 复制 帧 


哎 执 行 “ 文 件 ” |“ 置 入 ”命令 ， 弹 出 “ 置 入 ” 
对 话 框 , 在 对 话 框 中 选择 要 置 入 的 文件 2.jpg， 
如 图 16-17 所 示 。 
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图 16-17 


05 单 击 “ 置 入 ”按钮 ， 将 图 像 文件 置 入 ， 并 
调整 置 入 文件 的 大 小 与 原来 的 图 像 同 样 大 ， 
如 图 16-18 所 示 。 


“ 置 入 ”对 话 框 
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图 16-18 置 入 图 像 


06 选择 工具 箱 中 的 “ 横 排 文 字 工 具 ”， 在 舞 
台中 输入 文本 ， 如 图 16-19 所 示 。 


图 16-19 输入 文本 


面 执行“ 图 层 ” | “图 层 样式 ”| “ 描 边 ”命令 ， 
弹出 “图 层 样式 ”对 话 框 ， 将 描 边 颜色 设置 
为 白色 ,将 描 边 大 小 设置 为 2, 如 图 16-20 所 示 。 
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图 16-20 


“图 层 样式 ”对 话 杠 
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08 单 击 “确定 ”按钮 ， 添 加 图 层 样式 ， 如 图 
16-21 所 示 。 


图 16-21 添加 图 层 样式 的 效果 


王选 中 第 1 帧 , 在 “图 层 ” 面 板 中 将 “2” 图 
层 隐藏 ， 如 图 16-22 所 示 。 


图 16-22 隐藏 “2” 图 层 


史 在 “时 间 轴 ”面板 中 选择 第 1 帧 ， 单 击 该 
帧 右 下 角 的 三 角 按钮 ， 设 置 延迟 时 间 为 2 秒 ， 
如 图 16-23 所 示 。 


图 16-23 设置 帧 延迟 时 间 


辆 选中 第 2 帧 ,在 “图 层 ” 面板 中 将 “图 层 0” 
隐藏 , 将 帧 延迟 时 间 设 置 为 2, 如 图 16-24 所 示 。 
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图 16-24 将 图 层 0 隐藏 
杯 选 中 第 2 帧 ， 在 “图 层 ” 面 板 中 将 “2” 图 
层 隐 藏 ， 将 帧 延迟 时 间 设置 为 2， 如 图 16-25 
所 示 。 


图 16-25 隐藏 “2” 图 层 
咏 执 行 “文件 ”|“ 存 储 为 Web 所 用 格式 ”命令 ， 


弹出 “存储 为 Web 所 用 格式 ”对 话 框 ， 选 择 
GIF 方式 输出 图 像 ， 如 图 16-26 所 示 。 


ek @ 日 _ 填 


“存储 为 Web 所 用 格式 ”对 话 框 


狠 单 击 “ 存 储 ” 按 钮 , 弹出 “将 优化 结果 存储 为 ” 
对 话 框 , 在 对 话 框 中 设置 名 称 为 “1.gif”,“ 格 
式 ” 选 择 “ 仅 限 图 像 ”， 单 击 “ 保 存 ” 按 钮 ， 
即 可 保存 图 像 ， 如 图 16-27 所 示 。 


图 16-26 


图 16-27 “将 优化 结果 存储 为 ”对 话 框 


制作 网 页 导航 条 


导航 条 是 网 页 设计 中 不 可 缺少 的 部 分 ， 它 是 指 通过 一 定 的 技术 手段 ， 为 网 站 的 访问 者 提供 
一 定 的 途径 ， 使 其 可 以 方便 地 访问 到 所 需 的 内 容 ， 是 人 们 浏览 网 站 时 可 以 快速 从 一 个 页 面 转 到 
另 一 个 页 面 的 快速 通道 。 


16.4.1 ”网 页 导航 条 简介 


网 页 导航 表现 为 网 页 的 栏目 菜单 设置 、 辅 助 菜单 、 其 他 在 线 帮助 等 形式 。 网 页 导航 设置 是 
在 网 页 栏目 结构 的 基础 上 ， 进 一 步 为 用 户 浏览 网 页 提供 的 提示 系统 。 

一 个 网 站 导航 设计 对 提供 丰富 友好 的 用 户 体验 有 至 关 重 要 的 作用 ， 简 单 直观 的 导航 不 仅 能 
提高 网 站 易 用 性 ， 而 且 在 用 户 找到 所 要 的 信息 后 ， 有 助 于 提高 用 户 转化 率 。 导 航 设计 在 整个 网 
站 设计 中 的 地 位 举足轻重 。 导 航 有 许多 方式 ， 常 见 的 有 导航 图 、 按 钮 、 图 符 、 关 键 字 、 标 签 、 
序号 等 多 种 形式 。 在 设计 中 要 注意 以 下 基本 要 求 : 

。 ”明确 性 。 无 论 采用 哪 种 导航 策略 ， 导 航 的 设计 应 该 明确 ， 让 使 用 者 能 一 目 了 然 。 具 体 
表现 为 ， 能 让 使 用 者 明确 网 站 的 主要 服务 范围 ， 以 及 清楚 了 解 自己 所 处 的 位 置 。 只 有 
明确 的 导航 才能 真正 发 挥 “引导 ”的 作用 ， 引 导 浏 览 者 找到 所 需 的 信息 。 

。 可 理解 性 。 导 航 对 于 用 户 应 是 易于 理解 的 。 在 表达 形式 上 ， 要 使 用 清楚 简捷 的 按钮 、 
图 像 或 文本 ， 要 避免 使 用 无 效 字句 。 

。 ”完整 性 。 完 整 性 是 指 要求 网 站 所 提供 的 导航 具体 、 完 整 ， 可 以 让 用 户 获得 整个 网 站 范 
围 内 的 领域 性 导航 ， 能 涉及 网 站 中 全 部 的 信息 及 其 关系 。 

。 ”咨询 性 。 导 航 应 提供 用 户 咨询 信息 ， 它 如 同一 个 问 询 处 、 咨 询 部 ， 当 用 户 有 需要 的 时 候 ， 
能 够 为 使 用 者 提供 导航 。 

。 易 用 性 。 导 航 系统 应 该 容易 进入 ， 同 时 也 要 容易 退出 当前 页 面 ， 或 让 使 用 者 以 简单 的 方 
式 跳 转 到 想 要 去 的 页 面 。 

。 动态 性 。 导 航 信息 可 以 说 是 一 种 引导 , 动态 的 引导 能 更 好 地 解决 用 户 的 具体 问题 。 及 时 、 
动态 地 解决 使 用 者 的 问题 ， 是 一 个 好 导航 必须 具备 的 特点 。 

满足 以 上 这 些 导航 设计 的 要 求 ， 才 能 保证 导航 策略 的 有 效 ， 发 挥 出 导航 策略 应 有 的 作用 。 
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16.4.2 ”实战 3 一 一 设计 横向 导航 条 
下 面 讲 述 横向 导航 条 的 制作 ， 如 图 16-28 
所 示 ， 具 体操 作 步 骤 如 下 : 


图 16-28 横向 导航 条 


» 人 人 


04 启动 Photoshop, 执行 “文件 ”|“ 打 开 ” 命 令 ， 
打开 图 像 文 件 “index.jpg”， 如 图 16-29 所 示 。 


图 16-29 打开 图 片 


02 选择 工具 箱 中 的 “矩形 工具 ”， 在 舞台 中 
绘制 矩形 ， 如 图 16-30 所 示 。 


图 16-30 绘制 矩形 


艳 执行 “图 层 ”|“ 图 层 样式 ”|“ 混 合 选项 
命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 在 该 对 话 
框 中 选择 相应 的 样式 ， 如 图 16-31 所 示 。 
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“图 层 样式 ”对 话 框 


碌 单 击 “ 确 定 ”按钮 ， 设 置 图 层 样式 ， 如 图 
16-32 所 示 。 


图 16-31 


图 16-32 添加 图 层 样式 的 效果 
05 选择 工具 箱 中 的 “ 横 排 文字 工具 ”， 在 工 
将 “字体 大 小 ”设置 为 14， 将 字体 颜色 设 


置 为 ffffff， 然 后 输入 相应 的 导航 文本 ， 如 图 
16-33 所 示 。 


图 16-33 输入 文本 
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本 章 小 结 


本 章 综合 运用 前 面 所 介绍 的 知识 ， 制 作 了 网 页 中 经 常用 到 的 网 站 LOGO、 网 站 banner 和 
网 页 导航 条 。 通 过 本 章 的 学 习 ， 读 者 能 够 对 前 面 的 知识 进行 总 结 及 综合 应 用 ， 从 而 巩固 对 
Adobe Photoshop CC 的 掌握 。 


第 1 7 章 动画 设计 软件 Flash CC 快速 入 门 


Flash 动画 可 以 用 于 网 页 制作 。Flash 动画 主要 含有 矢量 图 形 ， 但 是 也 可 以 包含 导入 的 位 图 


和 音效 ， 还 可 以 把 浏览 者 输入 的 信息 同 交 互 性 联系 起 来 ， 从 而 产生 交互 效果 ， 也 可 以 生成 非 线 


性 电影 动画 。 
倒 Flash CC 介绍 全 ”Flash 动画 的 优化 与 发 布 


全 ”Flash 动画 制作 基础 


Flash CC 简介 


Adobe Flash CC 是 用 于 创建 动画 和 多 媒体 内 容 的 强大 的 平台 。Flash 的 功能 很 广泛 ， 可 以 
生成 动画 、 增 强 网 页 互动 性 ， 以 及 在 网 页 中 加 入 声音 ， 还 可 以 生成 亮丽 夺目 的 图 形 和 界面 。 
17.1.1 ”Flash 应 用 范围 

在 现 阶段 ，Falsh 应 用 的 领域 主要 有 娱乐 短片 、 片 头 、 广 告 、MTV、 导 航 条 、 小 游戏 、 产 
品 展示 、 应 用 程序 开发 的 界面 、 开 发 网 络 应 用 程序 等 几 个 方面 。 Flash 已 经 大 大 增加 了 网 络 功能 ， 
可 以 直接 通过 XML 读 取 数 据 ， 又 加 强 了 与 ColdFusion、ASP、JSP 和 Generator 的 整合 ， 所 以 
用 Flash 开发 网 络 应 用 程序 肯定 会 越 来 越 广泛 地 被 应 用 。 

1. 制作 Flash 短片 

相信 绝 大 多 数 人 都 是 通过 观看 网 上 精彩 
的 动画 短片 知道 Flash 的 。Flash 动画 短片 经 
常 以 其 感人 的 情节 或 是 搞笑 的 对 白 吸 引 上 网 
者 进行 观看 ， 如 图 17-1 所 示 。 

.制作 互动 游戏 

对 于 大 多 数 的 Flash 学 习 者 来 说 ， 制 作 
Flash 游戏 一 直 是 一 项 很 吸引 人 ， 也 很 有 趣 的 
技术 ， 甚 至 许多 闪 客 都 以 制作 精彩 的 Flash 游 
戏 作为 主要 目标 。 随 着 ActionScript 动态 脚本 
编程 语言 的 逐渐 发 展 ，Flash 已 经 不 再 仅 局 限 
于 制作 简单 的 交互 动画 程序 ， 而 是 致力 于 通 
过 复杂 的 动态 脚本 编程 制作 出 各 种 各 样 有 趣 、 
精彩 的 Flash 互动 游戏 ， 如 图 17-2 所 示 。 


下 


图 17-1 Flash 短片 
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3. 互联 网 视频 播放 
在 互联 网 上 ， 由 于 网 络 传输 速度 的 限制 ， 不 适合 一 次 性 读 取 大 容量 的 视频 数据 ， 因 此 便 需 
要 逐 帧 传送 要 播放 的 内 容 ， 这 样 才能 在 最 少 的 时 间 内 播放 完 所 有 的 内 容 。Flash 文件 正 是 应 用 
了 这 种 流 媒体 数据 传输 方式 ， 因 此 在 互联 网 的 视频 播放 中 被 广泛 应 用 ， 如 图 17-3 所 示 。 


图 17-2 互动 游戏 图 17-3 互联 网 视频 播放 

4. 制作 教学 用 课件 

Flash 课件 是 辅助 教师 讲课 ， 直 面 、 形 象 地 展示 课程 的 内 容 并 用 Flash 软件 制作 的 动画 。 随 
着 网 络 教 育 的 逐渐 普及 ， 网 络 授课 不 再 只 是 以 枯燥 的 文字 为 主 ， 更 多 的 教学 内 容 被 制作 成 了 动 
态 影像 ， 或 者 将 教师 的 知识 点 讲解 录音 进行 在 线 播放 。 可 是 这 些 教学 内 容 都 只 是 生硬 地 播放 事 
先 录制 好 的 内 容 ， 学 习 者 只 能 被 动 地 单 击 播放 ， 而 不 能 主动 参与 到 其 中 。Flash 的 出 现 改变 了 
这 一 切 ， 由 Flash 制作 的 课件 具有 很 高 的 互动 性 ， 使 学 习 者 能 够 真正 地 融入 到 在 线 学 习 中 ， 亲 
身 参 与 每 一 个 实验 ， 就 好 像 自己 真正 在 动手 一 样 ， 使 原本 枯燥 的 学 习 变 得 活泼 生动 。 如 图 17-4 
所 示 是 用 Flash 制作 的 课件 。 

5，Flash 电子 贺卡 

在 快 节奏 发 展 的 今天 ， 每 当 重 要 的 节日 或 者 纪念 日 ， 更 多 的 人 选择 借助 发 电子 贺卡 来 表达 
自己 对 对 方 的 祝福 和 情感 。 而 在 这 些 特别 的 日 子 里 ， 一 张 别出心裁 的 Flash 电子 贺卡 往往 能 够 
为 人 们 的 祝福 带 来 更 加 意 想不到 的 效果 。 如 图 17-5 所 示 是 用 Flash 制作 的 生日 贺卡 。 


图 17-4 利用 Flash 制作 的 课件 图 17-5 精美 的 Flash 电子 贺卡 
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6. 搭建 Flash 动画 网 站 

利用 Flash 搭建 网 站 具有 互动 性 强 、 视 觉 震撼 力 大 、 看 后 印象 深刻 等 优点 ， 是 传统 网 站 无 
法 比 的。 适合 电影 、 电 器 和 企业 新 产品 的 展示 。 由 于 制作 精美 的 Flash 动画 可 以 具有 很 强 的 视 
觉 冲击 力 和 听觉 冲击 力 ， 因 此 一 些 公司 在 网 站 发 布 新 的 产品 时 ， 往 往 会 使 用 Flash 制作 相关 的 
页 面 ， 借 助 Flash 的 精彩 效果 吸引 客户 的 注意 力 ， 从 而 达到 比 以 往 静 态 页 面 更 好 的 宣传 效果 。 
如 图 17-6 所 示 是 Flash 动画 网 站 。 

7. 制作 光盘 多 媒体 界面 

Flash 与 其 他 多 媒体 软件 结合 使 用 ， 可 以 制作 出 多 媒体 光盘 的 互动 界面 ， 如 图 17-7 所 示 。 


图 17-6 Flash 动画 网 站 图 17-7 光盘 多 媒体 界面 


17.1.2 ”Flash CC 工作 界面 

Adobe 公司 发 布 的 Adobe Flash CC 界面 清新 、 简 洁 、 友 好 ， 用 户 能 在 较 短 的 时 间 内 掌握 软 
件 的 使 用 。Adobe Flash CC 可 以 实现 多 种 动画 特效 ， 是 由 一 帧 一 帧 的 静态 图 片 在 短 时 间 内 连续 
播放 而 造成 的 视觉 效果 ， 表 现 为 动态 过 程 ， 能 满足 用 户 的 制作 需要 。 

Flash CC 的 工作 界面 由 菜单 栏 、 工 具 箱 、 时 间 轴 、 舞 台 和 面板 等 组 成 ， 如 图 17-8 所 示 。 
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图 17-8 Flash CC 的 工作 界面 
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1. 菜单 栏 


菜单 栏 是 最 常见 的 界面 要 素 , 它 包括 “文件 ”、“ 编 辑 ”"、“ 视 图 ”、“ 插 入 ”、“ 修 改 ”、“ 文 
本 ”、“ 命 令 ”、“ 控 制 ”、“ 调 试 ”、“ 窗 口 ” 和 “帮助 ”等 一 系列 菜单 ， 如 图 17-9 所 示 。 


根据 不 同 的 功能 类 型 ， 可 以 快速 地 找到 所 要 使 用 的 各 个 功能 选项 。 


图 17-9 菜单 栏 
。 “文件 ”菜单 : 用 于 文件 操作 ， 如 创建 、 打 开 和 保存 文件 等 。 


。 “编辑 ”菜单 : 用 于 动画 内 容 的 编辑 操作 ， 如 复制 、 剪 切 和 粘贴 等 。 


。 “视图 ”菜单 : 用 于 对 开发 环境 进行 外 观 和 版 式 设置 ， 包 括 放 大 、 缩 小 、 显 示 网 格 及 


辅助 线 等 。 


。 “插入 ”菜单 : 用 于 插入 性 质 的 操作 ， 如 新 建 元 件 、 插 入 场景 和 图 层 等 。 
。 “修改 ”菜单 : 用 于 修改 动画 中 的 对 象 、 场 景 甚至 动画 本 身 的 特性 ， 主 要 用 于 修改 动 


画 中 各 种 对 象 的 属性 ， 如 帧 、 图 层 、 场 景 及 动画 本 身 等 。 
“文本 ”菜单 : 用 于 对 文本 的 属性 进行 设置 。 
“命令 ”菜单 : 用 于 对 命令 进行 管理 。 
“控制 ”菜单 : 用 于 对 动画 进行 播放 、 控 制 和 测试 。 
“调试 ”菜单 : 用 于 对 动画 进行 调试 。 
“窗口 ”菜单 : 用 于 打开 、 关 闭 、 组 织 和 切换 各 种 窗口 面板 。 
“帮助 ”菜单 : 用 于 快速 获得 帮助 信息 。 

2. 工具 箱 

工具 箱 中 包含 一 套 完整 的 绘图 工具 ， 位 于 工作 界面 的 左 侧 ， 如 图 
17-10 所 示 。 如 果 想 将 工具 箱 变 成 浮动 工具 箱 ， 可 以 拖 动工 具 箱 最 上 方 的 
位 置 ， 这 时 屏幕 上 会 出 现 一 个 工具 箱 的 虚 框 ， 释 放 鼠 标 即 可 将 工具 箱 变 
成 浮动 工具 箱 。 

。 “选择 工具 ” 圈 : 用 于 选 定 对 象 、 拖 动 对 象 等 操作 。 

。 “部 分 选取 工具 ” 国 : 可 以 选取 对 象 的 部 分 区 域 。 
。 “任意 变形 工具 ” 国 : 对 选取 的 对 象 进行 变形 。 


“3D 旋转 工具 ” 国 : 3D 旋转 功能 只 对 影片 剪辑 发 生 作 用 。 
“ 套 索 工具 ” 国 : 选择 一 个 不 规则 的 图 形 区 域 ， 并 且 还 可 以 处 
理 位 图 图 形 。 
。 “钢笔 工具 ” 国 : 用 于 绘制 曲线 。 
。 “文本 工具 ”加 用 于 在 舞台 上 添加 文本 , 以 及 编辑 现 有 的 文本 。 
。 “线条 工具 ” 国 : 绘制 各 种 形式 的 线条 。 
。 “矩形 工具 ”号 :用 于 绘制 矩形 ， 也 可 以 绘制 正方 形 。 
。 “椭圆 工具 ” 国 : 绘制 的 图 形 是 椭圆 或 圆 形 。 
。 “多 角 星 形 工具 ” 国 : 用 于 绘制 多 角 星 形 ， 也 可 以 绘制 五 角 星 。 


工具 ”图 : 用 于 绘制 折线 、 直 线 等 。 
“刷子 工具 ” 轿 : 用 于 绘制 填充 图 形 。 
。 “墨水 瓶 工具 ”图 : 用 于 编辑 线条 的 属性 。 


图 17-10 工具 箱 


。 “颜料 桶 工具 ”图 : 用 于 编辑 填充 区 域 的 颜色 。 
。 “ 滴 管 工具 ” 轿 : 用 于 将 图 形 的 填充 颜色 或 线条 属性 复制 到 别 的 图 形 线条 上 ， 还 可 以 
采集 位 图 作为 填充 内 容 。 
“橡皮 擦 工具 ”图 : 用 于 擦 除 舞台 上 的 内 容 。 
“ 手 形 工具 ”要 当 有 舞台 上 的 内 容 较 多 时 , 可 以 用 该 工具 
“缩放 工具 ” 国 : 用 于 缩放 舞台 中 的 图 形 。 
“笔触 颜色 工具 ” 国 国 : 用 于 设置 线条 的 颜色 。 
“填充 颜色 工具 ” 辆 国 : 用 于 设置 图 形 的 填充 区 域 。 

3. “时 间 轴 ”面板 

“时 间 轴 ”面板 是 Flash 界面 中 重要 的 组 成 部 分 ， 用 于 组 织 和 控制 文档 内 容 在 一 定时 间 内 
播放 的 图 层 数 和 帧 数 ， 如 图 17-11 所 示 。 


F 移 舞台 及 各 个 部 分 的 内 容 。 


| 


图 17-11 “时 间 轴 ”面板 


在 “时 间 轴 ”面板 中 ， 其 左边 的 上 方 和 下 方 的 几 个 按钮 用 于 调整 图 层 的 状态 和 创建 图 层 。 
在 帧 区 域 中 ， 其 顶部 的 标题 指示 了 帧 编号 ， 动 画 播放 头 指 示 了 舞台 中 当前 显示 的 帧 。 

时 间 轴 状态 显示 在 “时 间 轴 ”面板 的 底部 ， 它 包括 若干 用 于 改变 帧 显示 的 按钮 ， 指 示 当 前 
帧 编号 、 帧 频 和 到 当前 帧 为 止 的 播放 时 间 等 。 其 中 ， 帧 频 直 接 影响 动画 的 播放 效果 ， 其 单位 是 
“ 帧 / 秒 (fps) ”， 默 认 值 是 12 帧 / 秒 。 

4. 舞台 

舞台 是 放置 动画 内 容 的 区 域 ， 可 以 在 整个 场景 中 绘制 或 编辑 图 形 ， 但 是 最 终 动画 仅 显示 场 
景 白色 区 域 中 的 内 容 ， 而 这 个 区 域 就 是 舞台 。 舞 台 之 外 的 灰色 称 为 工作 区 ， 在 播放 动画 时 不 显 
示 此 区 域 ， 如 图 17-12 所 示 。 

舞台 中 可 以 放置 的 内 容 包括 矢量 插图 、 文 本 框 、 按 钮 和 导入 的 位 图 图 形 或 视频 剪辑 等 。 工 
作 时 ， 可 以 根据 需要 改变 舞台 的 属性 和 形式 。 


纹理 春天 
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图 17-12 兽人 台 
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5. “属性 ”面板 

“属性 ”面板 默认 情况 下 处 于 展开 状态 , 在 Flash CC 中 ,“ 属 性 ”面板 、“ 滤 镜 ” 面 板 和 “ 参 
数 ” 面 板 整合 到 了 一 个 面板 组 。 

“属性 ”面板 的 内 容 取 决 于 当前 选 定 的 内 容 ， 可 以 显示 当前 文档 、 文 本 、 元 件 、 形 状 、 位 
图 、 视 频 、 帧 或 工具 的 信息 和 设置 。 例 如 ， 当 选择 工具 箱 中 的 “文本 工具 ”时 ， 在 “属性 ” 面 
板 中 将 显示 有 关 文 本 的 一 些 属性 设置 ， 如 图 17-13 所 示 。 


图 17-13 文本 工具 的 “属性 ”面板 


Flash 动画 的 基础 


Flash 是 一 个 非常 优秀 的 矢量 动画 制作 软件 ， 它 以 流 式 控制 技术 和 矢量 技术 为 核心 ， 制 作 
的 动画 具有 短小 、 精 悍 的 特点 ， 所 以 被 广泛 应 用 于 网 页 动画 的 设计 中 ， 已 成 为 当前 网 页 动画 设 
计 最 为 流行 的 软件 之 一 。 
17.2.1 建立 与 保存 Flash 动画 

Flash CC 文档 的 操作 与 其 他 软件 类 似 ， 具 体 包括 文档 的 新 建 、 保 存 和 打开 等 ， 下 面 来 简单 
地 介绍 Flash 动画 的 建立 与 保存 。 具 体操 作 步骤 如 下 ; 
丽 启动 软件 后 ， 出 现 一 个 新 文档 界面 ， 如 图 17-14 所 示 。 


图 17-14 启动 界面 
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醒 执 行 “文件 |“ 新 建 " 命 令 , 弹出“ 新建 文档 ”| 17.2.2 ”设置 Flash 的 属性 


We I ms 在 Flash 的 “文档 属性 ”对 话 框 中 可 以 设 
置 文档 大 小 、 文 档 的 背景 颜色 、 帧 频率 等 
下 面 详细 讲述 文档 属性 的 设置 。 

1 设置 文档 大 小 

执行 “修改 ”| “文档 ”命令 ， 弹 出 “ 广 
档 设置 ”对 话 框 ， 在 “舞台 大 小 ” 右 侧 单 击 
相应 数值 ， 可 以 输入 数值 或 拖 动 鼠标 设置 大 
小 ， 如 图 17-18 所 示 。 


图 17-15 “新 建文 档 ” 对 话 框 
02 在 对 话 框 中 选择 Flash 文件 后 , 单 击 “ 确 定 ” 


按钮 ， 即 可 新 建 一 个 文档 ， 如 图 17-16 所 示 。 


图 17-18 设置 文档 大 小 


2. 设置 背景 颜色 

单 击 “ 背 景 颜 色 ” 右 侧 的 按钮 ， 在 弹出 
的 拾 色 器 中 可 以 设置 舞台 的 背景 颜色 ， 如 图 
03 执行 “文件 ”| “保存 ”命令 ， 弹 出 “另存 为 ” 17-19 所 示 。 
对 话 框 ， 在 对 话 框 中 的 “文件 名 ”组 合 框 中 
输入 文件 名 ， 如 图 17-17 所 示 ， 单 击 “ 保 存 ” 
按钮 ， 即 可 保存 文档 。 


图 17-16 新 建文 档 


图 17-17 “另存 为 ”对 话 框 图 17-19 设置 背景 颜色 
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3. 设置 帧 频率 

在 “ 帧 频 ” 右 侧 可 以 输入 每 秒 要 显示 的 
动画 帧 数 。 帧 数 越 大 ， 动 画 显 示 越 快 ， 帧 数 
越 少 ,动画 显示 越 慢 ， 如 图 17-20 所 示 。 


设 为 黑 认 值 


图 17-20 设置 帧 频 


4. 使 用 “属性 ”面板 设置 属性 

使 用 “属性 ”面板 和 浮动 面板 组 ， 可 以 
查看 或 组 合 或 更 改 资源 及 其 属性 。 可 以 根据 
视图 的 需要 来 显示 /隐藏 面板 和 调整 面板 大 
小 ， 也 可 以 组 合 面 板 并 保存 自 定义 的 面板 设 
置 ， 从 而 更 容易 管理 工作 区 。 

执行 “窗口 ”| “属性” 命令， 可 以 打开 
或 关闭 “属性 ”面板 ， 如 图 17-21 所 示 。“ 属 
性 ”面板 可 以 显示 当前 使 用 的 工具 和 被 选择 
对 象 的 各 种 属性 和 参数 。 在 “属性 ”面板 中 
对 当前 可 以 使 用 的 工具 和 对 象 进行 参数 及 属 
性 的 设置 。 


17.2.3 ”Flash 时间 轴 的 使 用 


在 Flash 中 , 时 间 轴 位 于 工作 区 的 右 下 方 ， 
是 进行 Flash 动画 创建 的 核心 部 分 。 时 间 是 由 


17 章 


动画 设计 软件 Flash CC 快速 入 门 


图 层 、 帧 和 播放 头 组 成 的 ， 影 片 的 进度 通过 
帧 来 控制 。 时 间 轴 可 以 分 为 两 个 部 分 : 左 侧 
的 图 层 操作 区 和 右 侧 的 帧 操作 区 ， 如 图 17-22 
所 示 。 


时间 轴 ”面板 
17.2.4 “插入 关键 由 


帧 是 创建 动画 的 基础 ， 也 是 构建 动画 最 
基本 的 元 素 之 一 。 在 “时 间 轴 ”面板 中 可 以 
很 明显 地 看 出 帧 与 图 层 是 一 一 对 应 的 。 

在 时 间 轴 中 ， 帧 分 为 3 种 类 型 ， 分 别 是 
普通 帧 、 关 键 帧 、 空 白 关 键 帧 。 

1. 普通 帧 

普通 帧 起 着 过 滤 和 延长 关键 帧 内 容 显示 
的 作用 。 在 时 间 轴 中 ， 普 通 帧 一 般 以 空心 方 
格 表 示 , 每 个 方 格 占用 一 个 帧 的 动作 和 时 间 ， 
如 图 17-23 所 示 的 是 在 第 30 帧 处 插入 了 普 
通 帧 。 


图 17-22 


图 17-23 插入 普通 帧 

2. 空白 关键 帧 

空白 关键 帧 以 空心 圆 表示 。 空 白 关 键 帧 
是 特殊 的 关键 帧 ， 它 没有 任何 对 象 存在 ， 可 
以 在 其 上 绘制 图 形 ， 如 果 在 空白 关键 帧 中 添 
加 对 象 ， 它 会 自动 转换 为 关键 帧 。 一 般 新 建 
图 层 的 第 1 帧 都 为 空白 关键 帧 ， 一 旦 在 其 中 
绘制 图 形 后 ,， 则 变 为 关键 帧 , 如 图 17-24 所 示 。 
同样 的 道理 ， 如 果 将 某 关 键 帧 中 的 全 部 对 象 
删除 ， 则 此 关键 帧 会 转换 为 空白 关键 帧 。 
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图 17-24 空白 关键 帧 


3. 关键 帧 

关键 帧 是 用 来 定义 动画 变化 的 帧 。 在 动 
画 播放 的 过 程 中 ， 关 键 帧 会 呈现 出 关键 性 的 
动作 或 内 容 上 的 变化 。 在 时 间 轴 中 的 关键 帧 
显示 实心 的 小 圆 球 ， 存 在 于 此 帧 中 的 对 象 与 
前 后 帧 中 的 对 象 的 属性 是 不 同 的 , 在 “时 间 轴 ” 
面板 中 插入 关键 帧 ， 如 图 17-25 所 示 。 


图 17-25 关键 由 
17.2.5 “创建 帧 过 渡 效 果 
补 间 动画 是 Flash 中 最 常见 的 动画 形式 ， 
也 是 高 级 动画 形式 的 基础 。 可 以 说 ， 绝 大 多 数 
的 Flash 动画 都 是 建立 在 补 间 动 画 基础 上 的 。 
Flash 提供 了 3 种 不 同 的 补 间 动 画 类 型 ， 一 种 
是 动作 补 间 动 画 ， 另 一 种 是 形状 补 间 动画 。 
。 动作 补 间 动 画 是 指 在 Flash 的 时 间 帧 
面板 上 ， 在 一 个 关键 帧 上 放置 一 个 元 
件 ， 然 后 在 另 一 个 关键 帧 改变 这 个 元 
件 的 大 小 、 颜 色 、 位 置 、 透 明度 等 ， 
Flash 将 自动 根据 二 者 之 间 的 帧 的 值 
创建 的 动画 。 建 立 动作 补 间 动 画 后 ， 
时 间 帧 面板 的 背景 色 变 为 淡 紫色 ， 在 
起 始 帧 和 结束 帧 之 间 有 一 个 长 长 的 箭 
头 。 构 成 动作 补 间 动 画 的 元 素 是 元 件 ， 
包括 影片 剪辑 元 件 、 图 形 元 件 、 按 钮 
元 件 、 文 字 、 位 图 、 组 合 等 ， 但 不 能 
是 形状 ， 只 有 把 形状 组 合 〈Ctrl+G) 
或 者 转换 成 元 件 后 才 可 以 做 动作 补 间 
动画 。 如 图 17-26 所 示 的 是 动作 补 间 
过 渡 效果 。 
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图 17-26 动作 补 间 过 渡 效 果 


。 ”形状 补 间 动 画 是 在 Flash 的 “时 间 轴 ” 
面板 上 ， 在 一 个 关键 帧 上 绘制 一 个 形 
状 ， 然 后 在 另 一 个 关键 帧 上 更 改 该 形 
状 或 绘制 另 一 个 形状 等 ，Flash 将 自 
动 根据 二 者 之 间 的 帧 的 值 或 形状 来 创 
建 的 动画 。 它 可 以 实现 两 个 图 形 之 间 
颜色 、 形 状 、 大 小 、 位置 的 相互 变化 。 
建立 形状 补 间 动 画 后 ，“ 时 间 轴 ” 面 
板 的 背景 色 变 为 淡 绿 色 ， 在 起 始 帧 和 
结束 帧 之 间 也 有 一 个 长 长 的 箭头 。 构 
成 形状 补 间 动 画 的 元 素 多 为 用 鼠标 或 
压 感 笔 绘制 出 的 形状 ， 而 不 能 是 图 形 
元 件 、 按 钮 元 件 、 文 字 等 ， 如 果 要 使 
用 图 形 元 件 、 按 钮 元 件 、 文 字 ， 则 要 
先 将 其 打 散 〈Ctl+B) 后 才 可 以 创建 
形状 补 间 动 画 。 如 图 17-27 所 示 的 是 
形状 补 间 过 渡 效 果 。 


图 17-27 形状 补 间 过 渡 效 果 


17.2.6 ”添加 图 层 与 图 层 管理 

使 用 图 层 可 以 很 好 地 对 舞台 中 的 各 个 对 
象 分 类 组 织 ， 并 且 可 以 将 动画 中 的 静态 元 素 
和 动态 元 素 分 割 开 来 ， 以 减少 整个 动画 文件 
的 大 小 。 

单 击 “ 时 间 轴 ”面板 底部 的 “新 建 图 层 ” 
按钮 国 ， 即 可 在 选中 图 层 的 上 方 新 建 一 个 图 
层 ， 如 图 17-28 所 示 。 


图 17-28 新 建 一 个 图 层 


选中 要 移动 的 图 层 , 按 住 鼠标 左 键 拖 动 ， 
拖 动 图 层 到 相应 的 位 置 ， 释 放 鼠 标 ， 即 可 将 
图 层 拖 动 到 合适 的 位 置 。 此 时 移动 “图 层 2” 
到 “图 层 1” 的 下 方 ， 该 图 层 的 内 容 也 将 被 移 
动 到 图 层 1 的 下 方 ， 如 图 17-29 所 示 。 
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图 17-29 移动 图 层 
执行 “修改 ”1“ 时 间 轴 ”|“ 图 层 属性 ”命令 ， 
或 在 图 层 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜 
单 中 选择 “属性 ”命令 ， 弹 出 “图 层 属性 ” 
对 话 框 ， 如 图 17-30 所 示 。 
在 “图 层 属性 ”对 话 框 中 可 以 设置 以 下 
参数 : 
。 名称: 在 文本 框 中 输入 图 层 名 称 。 
。 显示 : 选中 此 复 选 框 , 将 显示 该 图 层 
否则 将 隐藏 该 图 层 。 
。 锁定: 选中 此 复 选 框 , 将 隐藏 该 图 层 
否则 将 显示 该 图 层 。 
。 类 型 : 用 于 设置 图 层 的 类 型 。 
。 轮廓 颜色 : 单 击 右边 的 颜色 框 ， 在 弹 
出 的 拾 色 器 中 设置 对 象 呈 轮 廓 显示 
时 ， 轮 廓 线 使 用 的 颜色 。 
。 图 层 高 度 : 用 于 设置 图 层 在 “时 间 轴 ” 
面板 中 显示 的 高 度 。 


图 17-30 


“图 层 属 性 ”对 话 框 


17.2.7 插入 元 件 

元 件 是 指 可 以 重复 使 用 的 图 形 、 按 钮 或 
动画 。 由 于 对 元 件 的 编辑 和 修改 可 以 直接 应 
用 于 动画 中 所 有 应 用 该 元 件 的 实例 ， 所 以 对 
于 一 个 具有 大 量 重 复元 素 的 动画 来 说 ， 只 要 
对 元 件 做 了 修改 ， 系 统 将 自动 地 更 新 所 有 使 
用 此 元 件 的 实例 。 

执行 “插入 ”|“ 新 建 元 件 ” 命 令 或 者 按 
Ctrl+F8 组 合 键 ， 弹 出 “创建 新 元 件 ” 对 话 框 ， 
在 对 话 框 中 的 “名 称 ” 文 本 框 中 输入 元 件 的 
名 称 ，“ 类 型 ”选择 可 以 选择 “图 形 ”、“ 影 
片 剪辑 ”、“ 按 钮 ”， 如 图 17-31 所 示 。 


“创建 新 元 件 ” 对 话 框 


。 图形 元 件 。 

制作 静态 图 像 ， 以 及 附属 于 主 影片 时 间 
轴 的 可 重复 使 用 的 动画 片段 。 

。 ”按钮 元 件 。 

创建 响应 鼠标 单 击 、 滑 过 或 其 他 动作 的 
交互 按钮 。 


图 17-31 
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。 影片 剪辑 。 

影片 剪辑 是 包含 在 Flash 影片 中 的 影片 片段 ， 有 自己 的 时 间 轴 和 属性 。 与 图 形 元 件 的 主要 
区 别 在 于 它 支持 ActionScript 和 声音 ， 具 有 交互 性 ， 是 用 途 最 广 、 功 能 最 多 的 部 分 。 影 片 剪 辑 
基本 上 是 一 个 小 的 影片 ， 可 以 包含 交互 控制 、 声 音 ， 以 及 其 他 的 影片 剪辑 元 件 的 实例 ， 也 可 以 
将 其 放置 在 按钮 元 件 的 时 间 轴 中 制作 动画 按钮 。 


17.2.8 ” 库 的 管理 与 使 用 


Flash 文档 中 的 库 ， 存 储 了 在 Flash 中 创建 的 元 件 及 导入 的 文件 ， 如 声音 剪辑 、 位 图 、 影 片 
剪辑 等 。“ 库 ”面板 显示 一 个 滚动 列表 ， 其 中 包含 库 中 所 有 项 目的 名 称 ， 可 以 在 工作 时 查看 并 
组 织 这 些 元 素 。“ 库 ”面板 中 项 目 名 称 旁 边 的 图 标 指示 该 项 目的 文件 类 型 。 此 外 ，“ 库 ”面板 
还 可 以 用 来 组 织 文件 夹 中 的 库 项 目 ， 查 看 项 目 在 文档 中 的 使 用 信息 ， 并 按照 类 型 对 项 目 排序 ， 
如 图 17-32 所 示 。“ 库 ”面板 包括 以 下 几 部 分 : 

。 ”名 称 。 库 元 素 的 名 称 与 源 文件 的 文件 名 称 对 应 。 

。 ”选项 菜单 。 单 击 右 上 角 的 图 按钮 ， 弹 出 如 图 17-33 所 示 的 菜单 ， 可 以 执行 其 中 的 命令 。 


图 17-32 “ 库 ” 面 板 图 17-33 弹出 菜单 


在 “ 库 ” 窗 口 的 元 素 列表 中 ， 看 见 的 文件 类 型 是 图 形 、 按 钮 、 影 片 剪辑 、 媒 体 声音 、 视 频 、 
字体 和 位 图 。 前 面 3 种 是 在 Flash 中 产生 的 元 件 ， 后 面 两 种 是 导入 素材 后 产生 的 。 

创建 库 元 件 可 以 选择 以 下 任意 一 种 操作 : 

。 执行 “插入 ”|“ 新 建 元 件 ” 命 令 。 

。 单 击 “ 库 ”面板 中 的 图 按钮 , 在 弹出 的 菜单 中 执行 “新 建 元 件 ” 命 令 , 如 图 17-34 所 示 。 

在 “ 库 ” 面 板 中 不 需要 使 用 的 库 项 目 ， 可 以 在 “ 库 ” 面 板 中 将 其 删除 ， 删 除 库 项 目的 具体 
操作 步骤 如 下 : 
0 执行 “窗口 ” |“ 库 ” 命 令 ， 打 开 “ 库 ”面板 。 
02 选中 不 需要 使 用 的 项 目 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “删除 ”命令 ， 即 可 将 
选中 的 项 目 删除 ， 如 图 17-35 所 示 。 


222 


图 17-34 选择 “新 建 元 件 ” 选 项 图 17-35 删除 项 目 


全】 Flash 动画 的 优化 与 发 布 


将 制作 好 的 动画 测试 、 优 化 和 导出 后 ， 就 可 以 利用 发 布 命令 将 制作 的 Flash 动画 文件 进行 
发 布 ， 以 便于 动画 的 推广 和 传播 。 
17.3.1 ”优化 动画 

Flash 作为 动画 创作 的 专业 软件 ， 操 作 简便 ， 功 能 强大 ， 现 已 成 为 交互 式 矢量 图 形 和 Web 
动画 方面 的 标准 。 但 是 ， 如 果 制 作 的 Flash 文件 较 大 ， 就 常常 会 让 网 上 浏览 者 在 不 断 等 待 中 失 
去 耐心 。 因 此 对 Flash 进行 优化 显得 很 有 必要 ， 但 前 提 是 不 能 有 损 其 播放 质量 。 

下 面 讲述 优化 Flash 动画 的 具体 操作 步骤 。 
而 执行 “文件 ” |“ 打开” 命令 ， 打 开 文 件 “优化 Ha”， 如 图 17-36 所 示 。 
醒 执 行 “ 文 件 ”|“ 发 布设 置 ” 命 令 , 打开 “发 布设 置 " 对 话 框 , 在 该 对 话 框 中 选中 “Flash (.swf) ， 
复 选 框 ， 打 开 相应 的 参数 设置 界面 ， 对 相关 参数 进行 设置 以 优化 Flash 动画 ， 如 图 17-37 所 示 。 
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图 17-37 优化 设置 
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下 下 


是 优化 Flash 动 画 时 的 一 些 注意 事项 。 


制作 动画 时 ， 应 多 采用 补 间 动 画 ， 尽 
量 避 免 使 用 逐 帧 动画 ， 因 为 关键 帧 的 
多 少 是 决定 文件 大 小 的 重要 因素 。 
绘制 线条 时 , 多 采用 实 线 , 少 用 虚线 。 
使 用 实 线 将 使 文件 更 小 。 
多 使 用 符号 。 如 果 动 画 中 的 元 素 有 使 
用 一 次 以 上 的 ， 则 应 考虑 将 其 转换 为 
元 件 。 重 复 使 用 元 件 并 不 会 使 动画 文 
件 明显 增 大 ， 因 为 动画 文件 只 需 储存 
一 次 元 件 的 图 形 数据 。 

多 用 矢量 图 形 ， 少 用 位 图 图 像 。 矢 量 
图 形 可 以 任意 缩放 而 不 影响 Flash 的 
画 质 ， 而 位 图 图 像 一 般 只 作为 静态 元 
素 或 背景 图 ，Flash 并 不 擅长 处 理 位 
图 图 像 的 动作 ， 应 避免 使 用 位 图 图 像 
元 素 制 作 动画 。 

导入 的 图 片 最 好 是 *.jpg 或 *.gif 格 式 。 
导入 音乐 文件 时 ， 最 好 是 MP3 格式 
的 文件 ， 这 样 不 仅 可 以 保证 一 定 质 量 
的 音质 ， 还 可 以 缩小 文件 尺寸 。 
限制 字体 和 字体 样式 的 数量 。 尽 量 不 
要 使 用 太 多 不 同 的 字体 。 使 用 的 字体 
越 多 ， 动 画 文件 就 越 大 。 尽 可 能 使 用 
Flash 内 置 的 字体 。 

尽量 不 要 将 文字 和 图 形 打 散 。 因 为 打 
散 后 的 字体 就 不 再 以 文字 的 形式 保存 
下 来 ， 而 是 以 图 形 的 形式 保存 。 对 于 
图 形 ， 也 尽量 不 要 打 散 ， 最 好 把 图 形 
组 合 在 一 起 ， 构 成 图 形 群 组 ， 这 样 也 
能 大 大 地 缩小 文件 尺寸 。 

尽量 避免 在 同一 时 间 内 安排 多 个 对 象 
同时 产生 动作 。 有 动作 的 对 象 也 不 要 
与 其 他 静态 对 象 安排 在 同一 图 层 里 。 
应 该 将 有 动作 的 对 象 安排 在 各 自 专 属 
的 图 层 内 ， 以 便 加 速 Flash 动画 的 处 
理 过 程 。 

动画 的 长 宽 尺 寸 越 小 越 好 .尺寸 越 小 ， 
动画 文件 就 越 小 。 


17.3.2 ”测试 动画 
Flash 动 换 制作 完成 后 ， 就 可 以 将 其 导出 
了 。 在 导出 或 发 布 动画 之 前 应 该 对 动画 文件 
进行 测试 ， 以 检查 动画 能 否 正常 播放 。 
测试 不 仅 可 以 发 现 影响 影片 播放 的 错误 ， 
而 且 可 以 检测 影片 中 片断 和 场景 的 转换 是 否 
流畅 自然 等 。 测 试 时 应 该 按照 影片 剧本 分 别 
对 影片 中 的 元 件 、 场 景 和 完成 影片 等 分 步 测 
试 ， 这 样 有 助 于 发 现 问题 。 在 测试 Flash 动画 
时 应 从 以 下 3 个 方面 考虑 : 
。 ”Flash 动 画 的 体积 是 否 处 于 最 小 状态 ， 
能 否 更 小 一 些 。 
。 ”Flash 动画 是 否 按照 设计 思路 达到 预 
期 的 效果 。 
。 在 网 络 环境 下 ， 是 否 能 正常 地 下 载 和 
观看 动画 。 
测试 Flash 动画 的 具体 操作 步骤 如 下 : 
硬 打 开 制 作 好 的 Flash 动画 , 执行 “控制 ”|“ 测 
试 ”命令 ， 如 图 17-38 所 示 。 


17-38 执行 “测试 ”命令 


02 选择 以 后 即 可 测试 预览 动画 ， 如 图 17-39 
所 示 。 
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17.3.3 ”设置 动画 发 布 格式 
在 发 布 Flash 动画 前 应 进行 发 布设 置 ， 执行“ 文件 ”| “发 布设 置 ”命令 ， 弹 出 “发 布设 置 ” 
对 话 框 ， 如 图 17-40 所 示 。 在 左 侧 选项 组 可 以 选择 发 布 的 格式 。 


图 17-40 “发 布设 置 ”对 话 框 
当 测试 Flash 影片 运行 无 误 后 ， 就 可 以 将 其 发 布 为 最 终 的 SWF 播放 文件 了 。 默 认 情 况 下 ， 


使 用 “发 布 ”命令 可 以 创建 Flash SWF 播放 文件 并 将 Flash 影片 插入 浏览 器 窗口 中 的 HTML 文 


件 中 。 
除了 以 SWF 格式 发 布 Flash 播放 影片 以 外 ， 也 可 以 用 其 他 文件 格式 发 布 Flash 影片 ， 如 
GIF、JPEG、PNG 和 QuickTime 格式 ， 以 及 在 浏览 器 窗口 中 显示 这 些 文件 所 需 的 HTML 文件 。 


综合 实战 一 -发布 动画 
将 Flash 动画 以 HTML 文件 格式 优化 发 布 的 效果 如 图 17-41 所 示 ， 具 体操 作 步 又 如 下 : 


ee 


站 人 
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图 17-41 发 布 效果 


原始 文件 : | 原始 文件 /CH17/ 发 布 动画 fla 
最 终 文件 | 最 终 文件 /CH17/ 发 布 动画 fla 
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0 打开 原始 文件 “发 布 动画 ia”， 如 图 17-42 所 示 。 
02 执行 “文件 ”| “发布 设置 ”命令 , 打开 “发 布设 置 ”对 话 框 。 在“ 发布 选项 组 中 选择 “HTML 
包装 器 ”类 型 ， 将 “品质 ”设置 为 “中 ”， 将 “窗口 模式 ”设置 为 “窗口 ”， 如 图 17-43 所 示 。 


2014 海 量 连衣裙 上 新 精彩 不 容错 过 
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图 17-42 打开 原始 文档 图 17-43 “发 布设 置 ”对 话 框 


本 章 小 结 


Flash 的 功能 很 广泛 ， 可 以 生成 动画 、 增 加 网 页 互动 性 ， 以 及 在 网 页 中 加 入 声音 ， 还 可 以 
生成 亮丽 夺目 的 图 形 和 界面 。 本 章 介绍 了 Flash 动画 的 基础 、Flash 动画 的 优化 与 发 布 ， 通 过 本 
章 的 学 习 读 者 可 以 初步 了 解 Flash 动画 设计 软件 。 希 望 这 些 介 绍 能 激发 起 读者 学 习 Flash 的 兴 
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作为 一 款 优秀 的 交互 性 矢量 动画 制作 软件 ， 丰 富 的 矢量 绘图 和 编辑 功能 是 必 不 可 少 的 。 熟 


练 掌 握 绘图 工具 的 使 用 是 Flash 学 习 的 关键 。 在 学 习 和 使 用 Flash 的 过 程 中 ， 应 当 清楚 各 种 工 
具 的 用 途 ， 灵 活 运用 这 些 工 具 ， 可 以 绘制 出 棚 棚 如 生 的 矢量 图 形 ， 为 后 面 的 动画 制作 做 好 准备 


工作 。 


技术 要 点 
令 ”使 用 绘图 工具 全 文本 的 基本 操作 
依 修改 工具 全 ”对象 的 选取 、 复 制 与 移动 
令 添 色 工具 全 ”变形 处 理 


国术 使 用 绘图 工具 


在 Flash 中 ， 创 建 和 编辑 矢量 图 形 主要 是 通过 绘图 工具 箱 提供 的 绘图 工具 来 进行 的 ，Flash 
提供 了 多 种 绘图 工具 ， 利 用 它们 可 以 很 方便 地 绘制 出 棚 棚 如 生 的 矢量 图 形 。 
18.1.1 铅笔 工具 

铅笔 工具 是 用 来 绘制 线条 和 形状 的 。 使 用 “铅笔 工具 ”可 以 自由 地 绘制 图 形 ， 它 的 使 用 方 
法 和 真实 铅笔 的 使 用 方法 大 致 相同 。 要 绘制 
平滑 或 伸 直 的 线条 ， 可 以 给 “铅笔 工具 ” 选 
择 一 种 绘图 模式 。 使 用 “铅笔 工具 ”可 以 绘 
制 任意 形状 的 线条 ， 选 择 工具 箱 中 的 “铅笔 
工具 ”会 出 现 铅笔 模式 附属 工具 选项 ， 有 3 
种 模式 可 供 选 择 ， 如 图 18-1 所 示 。 通 过 它 可 图 18-1 “ 铬 笔 工具 ”的 模式 
以 选择 所 绘 笔触 的 模式 。 

。 “ 伸 直 ”: 在 绘图 过 程 中 ， 使 用 此 模式 会 将 线条 转换 成 接近 形状 的 直线 ， 绘 制 的 图 形 
趋向 平 直 、 规 整 。 
。 “平滑 ”: 适用 于 绘制 平滑 图 形 ， 在 绘制 过 程 中 会 自动 将 所 绘图 形 的 棱角 去 掉 ， 转 换 

成 接近 形状 的 平滑 曲线 ， 使 绘制 的 图 形 趋 于 平滑 、 流 畅 。 

。 “墨水 ”: 可 随意 地 绘制 各 类 线条 ， 这 种 模式 不 对 笔触 进行 任何 修改 。 

使 用 “铅笔 工具 ”绘制 图 形 的 具体 操作 步骤 如 下 : 

三 打开 原始 文档 , 选择 工具 箱 中 的 “铅笔 工具 ”, 在 “属性 ”面板 中 设置 笔触 颜色 、 样式 和 大 小 ， 
如 图 18-2 所 示 。 
醒 按 住 鼠标 左 键 在 舞台 中 绘制 形状 ， 如 图 18-3 所 示 。 
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图 18-2 选择 “铅笔 工具 ” 


18.1.2 ”钢笔 工具 

“钢笔 工具 ”用 于 绘制 路 径 ， 可 以 创建 
直线 或 曲线 段 ， 然 后 调整 直线 段 的 角度 、 长 
度 及 曲线 段 的 斜率 。 

选择 工具 箱 中 “钢笔 工具 ”， 在 舞台 上 单 
击 确定 一 个 锚 记 点 , 继续 单 击 添加 相连 的 线段 。 
直线 路 径 上 或 曲线 路 径 接合 处 的 锚 记 点 称 为 转 
角 点 ， 以 小 方形 显示 ， 如 图 18-4 所 示 。 


图 18-4 钢笔 工具 


18.1.3 ”刷子 工具 

使 用 工具 箱 中 的 “刷子 工具 ”可 以 随意 
地 画 出 色 块 ， 在 其 选项 中 可 以 设置 刷子 的 大 
小 和 样式 ， 如 图 18-5 所 示 。 单 击 选项 区 中 的 
按钮 ， 在 弹出 的 菜单 中 有 5 种 填充 模式 ， 如 
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图 18-3 绘制 形状 


图 18-6 所 示 。 


图 18-5 刷子 大 小 


图 18-6 填充 模式 


。 ”标准 绘画 ;使 用 工具 箱 中 的 “刷子 工 
具 ”， 设 置 填充 颜色 ， 将 光标 移动 到 
舞台 上 ， 在 舞台 中 按 住 鼠 标 左 键 进行 


拖 动 。 
。 ”颜料 填充 它 只 影响 填 色 的 内 容 ， 不 
会 遮 住 线条 。 


。 后面 绘 画 : 在 图 形 上 绘制 时 ， 它 只 会 
在 图 形 的 后 面 , 不 会 影响 前 面 的 图 像 。 

。。 颜料 选择 : 使 用 “选择 工具 ”选择 图 
形 的 一 部 分 区 域 , 再 使 用 “刷子 工具 ?” 
绘制 。 

。 ”内 部 绘画 : 在 绘画 时 ， 画 笔 的 起 始点 

必须 在 轮廓 线 以 内 ， 而 且 画 布 的 范围 
也 只 作用 在 轮廓 线 以 内 。 

使 用 “刷子 工具 ”的 具体 操作 步骤 如 下 : 
0 打开 原始 文件 ， 选 择 工具 箱 中 的 “刷子 工 
具 ”， 设 置 填充 颜色 为 #0066CC， 如 图 18-7 
所 示 。 
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图 18-10 “线条 工具 ”的 “属性 ”面板 
在 “属性 ”面板 中 可 以 设置 以 下 参数 : 
。 “笔触 ”: 用 于 设置 线条 的 粗细 。 


图 187 打开 原 站 文人 “虚线 ”、“ 点 状 线 ”、“ 锯 齿 状 ”、 
醒 设 置 刷子 的 大 小 和 形状 ,将 鼠标 指针 移 到 “点 刻 线 ” 和 “斑马 线 ”6 个 选项 。 
舞台 中 ， 按 住 鼠 标 左 键 拖 动 即 可 绘制 色 块 ， 。 “缩放 ”: 选中 此 复 选 框 ， 可 以 将 自 
如 图 18-8 所 示 。 定义 笔触 缩放 倍数 。 


。 “ 尖 角 ”: 设置 尖 角 大 小 。 
04 打开 原始 文件 ， 如 图 18-11 所 示 。 


1 HEART AZA 
IT heart diamond 


图 18-8 绘制 色 块 
图 18-11 打开 原始 文件 


02 在 “时 间 轴 ?面板 中 单 击 “ 新 建 图 层 ” 按钮 ， 
新 建 “ 图 层 2”， 如 图 18-12 所 示 。 


18.1.4 线条 工具 

在 工具 箱 中 选择 “线条 工具 ” 贺 ， 这 时 ， 
鼠标 移动 到 工作 区 后 将 变 成 一 个 十 字 ， 这 说 
明 此 时 已 经 激活 了 工具 ， 如 图 18-9 所 示 。 
在 “属性 ”面板 中 可 设置 线条 的 属性 ， 如 图 
18-10 所 示 。 


| HEART AZA 
I heart diamond 


图 18-9 选择 “线条 工具 ” 
图 18-12 新 建 图 层 
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三 选择 工具 箱 中 的 “线条 工具 ” 贺 , 在 “属性 ” 
面板 中 将 笔触 颜色 设置 为 #00CC00， 将 笔触 
大 小 设置 为 8， 如 图 18-13 所 示 。 


图 18-13 设置 笔触 颜色 和 大 小 


吗 按 住 Shift 键 ， 在 图 像 上 拖 动 鼠标 左 键 到 合 
适 的 位 置 , 释放 鼠标 左 键 , 即 可 绘制 一 个 线条 ， 
如 图 18-14 所 示 。 


1 HEART AZA : IQ 
Theart diamond : 本: 图 18-16 绘制 椭圆 


18.1.6 ”矩形 工具 


“矩形 工具 ”用 于 创建 各 种 比例 的 矩形 ， 
也 可 以 绘制 正方 形 , 其 操作 步骤 和 “椭圆 工具 ” 
18.1.5 ”椭圆 工具 的 使 用 相似 。 所 不 同 的 是 ,在 "矩形 工具 “的 “ 属 
性 ”面板 中 可 以 设置 矩形 的 边 角 半 径 。 

使 用 “矩形 工具 ”的 具体 操作 步骤 如 下 : 
国 打开 原始 文档 ， 选 择 工具 箱 中 的 “矩形 工 
具 ”， 如 图 18-17 所 示 。 


图 18-14 绘制 线条 


“椭圆 工具 ”可 用 来 绘制 椭圆 和 正 圆 ， 
rg deat ip iy 线 宽 和 线 
型 ， 还 可 以 任意 选择 轮廓 线 的 颜色 和 圆 的 填 
充 色 。 但 是 边界 线 只 能 使 用 单 色 ， 而 填充 区 
域 则 可 以 使 用 单 色 或 渐变 色 ， 具 体操 作 步 骤 
如 下 : 
呀 打开 原始 文档 ， 选 择 工 具 箱 中 的 “椭圆 工 
具 ”， 如 图 18-15 所 示 。 
虽 单 击 工具 箱 中 的 “笔触 颜色 ”按钮 ， 在 弹 
出 的 颜色 框 中 设置 笔触 颜色 为 “无 ”。 单 击 “ 填 
充 颜 色 ” 按 钮 ， 在 弹出 的 颜色 框 中 设置 填充 
颜色 为 机 79CFF， 按 住 鼠标 左 键 在 舞台 中 绘 
制 椭圆 ， 效 果 如 图 18-16 所 示 。 图 18-17 选择 “矩形 工具 ” 


230 


到 在 “属性 ”面板 中 可 以 设置 矩形 各 个 属性 ，，18-19 所 示 。 
如 图 18-18 所 示 。 


图 18-18 设置 属性 
0 拖 动 鼠标 即 可 绘制 圆 角 矩形 ， 效 果 如 图 图 18-19 绘制 圆 角 乱 形 


修改 工具 


作为 一 项 重要 的 绘图 工具 ，“ 选 择 工具 ”是 工具 箱 中 使 用 率 最 高 的 工具 之 一 。 它 的 主要 用 
途 是 对 工作 区 中 的 对 象 进 行 选择 和 对 一 些 线条 进行 修改 。 当 某 一 图 形 对 象 被 选中 后 ， 图 像 将 由 
实 变 虚 ， 表 示 已 被 选中 。 在 绘图 操作 过 程 中 ， 用 户 常常 需要 选择 将 要 处 理 的 对 象 ， 然 后 对 这 些 
对 象 进行 处 理 ， 而 选择 对 象 通常 使 用 的 就 是 “选择 工具 ”。 
18.2.1 选择 工具 

“选择 工具 ” 国 用 于 选择 或 移动 直线 、 
图 形 、 元 件 等 一 个 或 多 个 对 象 ， 也 可 以 拖 动 
一 些 未 选 定 的 直线 、 图 形 、 端 点 或 曲线 来 改 
变 直 线 或 图 形 的 形状 。 

选择 “选择 工具 ”会 出 现 3 个 附属 工具 
选项 ， 如 图 18-20 所 示 。 


图 18-21 选中 对 象 
02 按 住 Shift 键 单 击 其 他 对 象 ， 可 以 选中 多 个 


图 18-20 附属 工具 对 象 ， 如 图 18-22 所 示 。 


。 “ 贴 紧 至 对 象 ”: 选择 此 选项 ， 绘 图 、 
移动 、 旋 转 及 调整 的 对 象 将 自动 对 齐 。 
。 “平滑 ”: 对 直线 和 开头 进行 平滑 处 
理 。 
。 “ 伸 直 ” 对 直线 和 开头 进行 平 直 处 理 。 
使 用 “选择 工具 ”的 具体 操作 步骤 如 下 : 
而 在 工具 箱 中 选择 “选择 工具 ” 圆 ， 在 舞台 
中 直接 单 击 相应 的 对 象 ， 即 可 选择 该 对 象 ， 
如 图 18-21 所 示 。 图 18-22 选中 多 个 对 象 
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18.2.2 ”部 分 选取 工具 18.2.3” 套 索 工具 

使 用 “部 分 选取 工具 ”可 以 选取 并 移动 与 “选择 工具 ”的 功能 相似 ，“ 套 索 工 
对 象 ， 除 此 之 外 ， 它 还 可 以 对 图 形 进 行 变形 “” 具 ”也 是 用 来 选择 对 象 的 。 但 与 “选择 工具 ” 
等 处 理 。 当 某 一 对 象 被 “部 分 选取 工具 ” 选 ” 相 比 ，“ 套 索 工 具 ” 的 选择 方式 有 所 不 同 。 使 
中 后 ， 它 的 图 像 轮 廓 线 上 将 出 现 很 多 控制 点 ， ， 用 套 索 工具 可 以 自由 选 定 要 选择 的 区 域 ， 而 不 
表示 该 对 象 已 被 选中 ， 如 图 18-23 所 示 。 是 像 “选择 工具 ”那样 将 整个 对 象 都 选中 。 单 
击 “ 套 索 工具 ”后 会 出 现 3 个 附属 工具 选项 ， 
如 图 18-26 所 示 。 


图 18-26 “和 套 索 工具 ”组 


使 用 “ 套 索 工具 ”的 具体 操作 步骤 如 下 : 

三 启动 Flash， 执 行 “文件 ”| 打开 ” 命 

图 18-23 选中 对 象 令 ， 在 弹出 的 对 话 框 中 打开 相应 的 文件 ， 按 

选择 其 中 一 个 控制 点 ， 此 时 光标 右 下 角 Ctl 十 B 组 合 键 分 离 图 像 ， 如 图 18-27 所 示 。 

会 出 现 一 个 空白 的 正方 形 ， 拖 动 该 点 ， 轮 廓 本 
会 随 之 改变 ， 如 图 18-24 所 示 。 


图 18-27 分 离 图 像 
02 在 工具 箱 中 选择 “多 边 形 工具 ”， 将 光标 
图 18-24 改变 轮 廊 置 于 要 圈 选 的 位 置 ， 按 住 鼠 标 不 放 拖 动 ， 直 


选择 “部 分 选取 工具 ”后 , 将 光标 靠近 对 象 ，， 到 将 所 需 的 图 像 全 部 选择 ， 如 图 18-28 所 示 。 
当 光 标 右 下 角 出 现 黑 色 实 心 方块 的 时 候 ， 按 下 ET : 
鼠标 左 键 就 可 以 拖 动 对 象 了 ， 如 图 18-25 所 示 。 


图 18-28 图 选 图 像 


03 释放 鼠标 即 可 将 鼠标 框 选 的 区 域 选中 ， 如 
图 18-25 拖 动 对 象 图 18-29 所 示 。 
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图 18-29 选中 对 象 


18.2.4 橡皮 擦 工具 
“橡皮 擦 工具 ”可 以 用 来 控 除 图 形 的 外 


轮廓 和 内 部 颜色 。“ 橡 皮 擦 工具 ”有 多 种 擦 
除 模 式 ， 例 如 可 以 设置 为 只 擦 除 图 形 的 外 轮 
廓 和 侧 部 颜色 ， 也 可 以 定义 只 擦 除 图 形 对 象 
某 一 部 分 的 内 容 。 用 户 可 以 在 实际 操作 时 根 
据 具体 情况 设置 不 同 的 擦 除 模式 。 

在 工具 箱 中 选择 “橡皮 擦 工具 ”， 在 工 
其 箱 中 的 最 下 面 有 一 些 附加 选项 ， 如 图 18-30 
所 示 。 使 用 此 工具 时 ， 在 舞台 中 单 击 并 拖 动 
鼠标 , 探 除 完毕 后 释放 鼠标 ,如 图 18-31 所 示 。 


1. 橡皮 擦 模式 
用 于 擦 除 区域 ， 包括“ 标准 擦 除 ”、“ 擦 
除 填 色 ”、“ 擦 除 线条 ”、“ 擦 除 所 选 填充 ” 


和 “内 部 擦 除 ”5 个 选项 。 
。 ”标准 擦 除 ， 用 于 擦 除 同一 层 上 的 笔触 
和 填充 区 域 。 
。 擦 除 填 色 : 只 擦 除 填充 区 域 ,不 影响 
笔触 。 
。 _ 擦 除 线条 : 只 擦 除 笔触 ， 不 影响 填充 


添 色 工 具 


添 色 工 具 主要 包括 “颜料 桶 工具 ”、 
它们 的 使 用 方法 。 


18.3.1 颜料 桶 工具 


“墨水 瓶 工 具 ”、 
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区 域 。 

。 擦 除 所 选 填充 : 只 探 除 当前 选 定 的 填 
充 区 域 ， 而 不 影响 笔触 。 

。 ”内 部 擦 除 ， 只 擦 除 橡皮 擦 笔触 开始 处 
的 填充 。 如 果 从 空白 点 开始 擦 除 ， 则 
不 会 擦 除 任何 内 容 。 以 这 种 模式 使 用 
橡皮 擦 并 不 影响 笔触 。 


图 18-31 擦 除 效 果 


2. 水 龙头 

使 用 此 选项 ， 可 以 直接 清除 所 选取 的 区 
域 ， 使 用 时 只 需 单 击 笔触 或 填充 区 域 ， 就 可 
以 控 除 笔触 或 填充 区 域 。 

3. 橡皮 擦 形状 

使 用 此 选项 ， 可 以 设置 橡皮 擦 的 形状 以 
进行 精确 的 擦 除 。 


“ 滴 管 工具 ”， 下 面 就 来 详细 介绍 


“颜料 桶 工具 ”是 用 来 填充 封闭 区 域 的 , 它 既 能 填充 一 个 空白 区 域 , 又 能 改变 已 着 色 区 域 的 颜色 ， 
可 以 使 用 纯色 、 渐 变 和 位 图 填充 ， 甚 至 可 以 用 “颜料 桶 工具 ”对 一 个 未 完全 封闭 的 区 域 进行 填充 。 
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在 工具 箱 中 选择 “颜料 桶 工具 ”， 单 击 
工具 箱 中 的 “空隙 大 小 ”按钮 ， 在 弹出 的 菜 
单 中 可 以 设置 填充 的 属性 ， 包 括 “不 封闭 空 
除 ”““ 封 闭 小 空 除 ”““ 封 闭 中 等 空 除 ” 和“ 封 
闭 大 空 除 ”4 个 选项 ， 如 图 18-32 所 示 。 


OO 不 封闭 空隙 
封闭 小 空隙 


〇 ”封闭 中 等 空隙 
封闭 大 空隙 


图 18-32 设置 填充 的 属性 


。 不 封闭 空隙 : 在 使 用 “颜料 桶 工具 ” 
填充 颜色 前 ，Flash 将 不 会 自行 封闭 
所 选区 域 的 任何 空 除 。 也 就 是 说 ， 
所 选区 域 所 有 未 封闭 的 曲线 内 将 不 
会 被 填 色 。 

。 ”封闭 小 空 阶 ， 在 使 用 “颜料 桶 工具 ” 
填充 颜色 前 ， 会 自行 封闭 所 选区 域 的 
小 空隙 。 也 就 是 说 ， 如 果 所 填充 区 域 
不 是 完全 封闭 的 ， 但 是 空隙 很 小 ， 则 
Flash 会 近似 地 将 其 判断 为 完全 封闭 
而 进行 填充 。 

。 封闭 中 等 空隙 : 在 使 用 “颜料 桶 工具 ” 
填充 颜色 前 ， 会 自行 封闭 所 选区 域 的 
中 等 空 阶 。 也 就 是 说 ， 如 果 所 填充 区 
域 不 是 完全 封闭 的 ， 但 是 空 阶 大 小 中 
等 ， 则 Flash 会 近似 地 将 其 判断 为 完 
全 封闭 而 进行 填充 。 

。 封闭 大 空 除 : 在 使 用 “颜料 桶 工具 ” 
填充 颜色 前 ， 自 行 封闭 所 选区 域 的 大 
空隙 。 也 就 是 说 ， 如 果 所 填充 区 域 不 
是 完全 封闭 的 , 而 且 空 除 尺 寸 比 较 大 ， 
则 Flash 会 近似 的 将 其 判断 为 完全 封 
闭 而 进行 填充 。 

使 用 “颜料 桶 工具 ”的 具体 操作 步骤 如 下 : 
叫 打 开 文 档 , 在 工具 箱 中 选择 “颜料 桶 工具 ”， 
在 附属 工具 选项 中 选择 需要 的 空隙 模式 ， 如 
图 18-33 所 示 。 

02 将 鼠标 指针 移 到 舞台 中 ， 将 发 现 它 变 成 了 
一 个 颜料 桶 , 在 填充 区 域内 部 单 击 , 填充 颜色 ， 
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或 者 在 轮廓 内 单 击 进行 填充 , 如 图 18-34 所 示 。 


10 月 21 日 新 5 折 生 站 区 


图 18-33 选择 颜料 桶 工具 


10 朋 21 日 新 如 5 折 吉 着 攻 


品 芮 和 奢侈 不 需要 台词 
di 


图 18-34 填充 颜色 


18.3.2 ”墨水 瓶 工具 


“墨水 瓶 工具 ”用 来 在 绘图 中 更 改线 条 
和 轮廓 线 的 颜色 和 样式 。 它 不 仅 能 够 在 选 定 
图 形 的 轮廓 线 上 加 上 规定 的 线条 ， 还 可 以 改 
变 一 条 线段 的 粗细 、 颜 色 、 线 型 等 ， 并 且 可 
以 给 打 散 后 的 文字 和 图 形 加 上 轮廓 线 。“ 墨 
水 瓶 工具 ”本 身 不 能 在 舞台 中 绘制 线条 ， 只 
能 对 已 有 线条 进行 修改 。 
0 选择 工具 箱 中 的 “墨水 瓶 工具 ”， 将 鼠 
标 指针 移 到 舞台 中 ， 将 发 现 它 变 成 了 一 个 墨 
水 瓶 形状 ， 表 明 此 时 已 经 激活 了 “墨水 瓶 工 
具 ”， 在 “属性 ”面板 中 设置 想 要 的 参数 ， 
如 图 18-35 所 示 。 
02 现在 可 以 对 线条 进行 修改 或 者 给 无 轮廓 图 
形 添加 轮廓 了 ， 使 用 “墨水 瓶 工 具 ” 改 变 轮 
廓 线 颜 色 ， 如 图 18-36 所 示 。 


落地 式 浴室 柜 组 合 


图 18-36 改变 轮廓 线 颜色 


18.3.3” 滴 管 工具 
“ 滴 管 工具 ”是 吸取 某 种 对 象 颜色 的 管 

状 工具 ， 应 用 “ 滴 管 工具 ”可 以 获取 需要 的 

颜色 ， 另 外 还 可 以 对 位 图 进行 属性 采样 。 使 

“ 滴 管 工具 ”的 具体 操作 步骤 如 下 

画 打开 原始 文件 ， 如 图 18-37 所 示 。 


图 18-37 打开 原始 文件 
02 执行 “修改 ”|“ 分 离 ”命令 ,将 图 像 打 散 ， 


令 
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选择 工具 箱 中 的 “ 滴 管 工具 ”。 如 图 18-38 所 示 。 


图 18-38 打 散 图 像 


王将 “ 滴 管 工具 ”放置 在 要 复制 其 属性 的 填 
充 上 ， 这 时 在 “ 滴 管 工具 ”的 旁边 出 现 了 一 
个 刷子 图 标 ， 单 击 鼠 标 则 将 形状 信息 采样 到 
填充 工具 中 ， 如 图 18-39 所 示 。 


图 18-39 采集 填充 
要 选择 工具 箱 中 的 “和 矩形 工具 ”， 在 舞台 中 
绘制 一 个 矩形 ， 该 矩形 将 具有 “ 滴 管 工具 ?” 
所 提取 的 填充 属性 ， 如 图 18-40 所 示 。 
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文本 的 基本 操作 
在 Flash 中 包含 3 种 文本 对 象 ， 分 别 是 静态 文本 、 动 态 文本 和 输入 文本 。 


18.4.1 ”创建 静态 文本 

静态 文本 就 是 在 动画 制作 阶段 创建 ， 在 动画 播放 阶段 不 能 改变 的 文本 。 在 静态 文本 框 中 ， 
可 以 创建 横 排 或 竖 排 文本 。 具 体操 作 步 骤 如 下 : 
鸭 新 建 Flash 文档 ， 选 择 工 具 箱 中 的 “文本 工具 ” 国 ， 如 图 18-41 所 示 。 
吗 打开 “属性 ”面板 ， 在 “文本 类 型 ”下 拉 列 表 中 选择 “静态 文本 ”， 将 “系列 ”设置 为 “ 黑 
体 ”， 将 字体 “大 小 ”设置 为 70， 将 字体 “颜色 ”设置 为 丁 FCC99， 如 图 18-42 所 示 。 


经 典 款 雨季 特惠 


图 18-41 选择 “文本 工具 ” 


吗 在 舞台 上 单 击 并 输入 文字 “圣诞 快乐 ”， 
如 图 18-43 所 示 。 


图 18-44 选择 “动态 文本 ”选项 


02 在 文档 中 按 下 鼠标 左 键 不 放 ， 拖 出 一 个 文 
本 输入 框 ， 如 图 18-45 所 示 。 


图 18-43 输入 文字 上 -一 一 
本 = 
18.4.2 ”创建 动态 文本 -i 


动态 文本 框 用 来 显示 动态 可 更 新 的 文本 : 
0 选择 工具 箱 中 的 “文本 工具 ”， 在 “属性 ” 
面板 中 的 “文本 类 型 ”下 拉 列 表 中 选择 “ 动 
态 文 本 ”选项 ， 如 图 18-44 所 示 。 图 18-45 文本 输入 框 
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18.4.3 ”创建 输入 文本 

创建 输入 文本 具体 操作 步骤 如 下 : 
041 在 “属性 ”面板 中 的 “文本 类 型 ”下 拉 列 表 中 选择 “输入 文本 ”， 在 “线条 类 型 ”下 拉 列 
表 中 选择 “多 行 ”， 如 图 18-46 所 示 。 
02 在 文档 中 按 下 鼠标 左 键 并 拖 出 一 个 文本 框 ， 如 图 18-47 所 示 。 


图 18-46 输入 静态 文本 图 18-47 输入 静态 文本 


对 象 的 选取 、 复 制 与 移动 
下 面 分 别 来 讲述 移动 对 象 、 复 制 对 象 和 删除 对 象 的 操作 。 


18.5.1 选取 对 象 

一 般 而 言 ， 对 舞台 中 的 对 象 进行 编辑 必须 先 选择 对 象 。 因 此 选择 对 象 是 最 基本 的 操作 。 选 
择 对 象 有 很 多 种 方法 。Flash 中 提供 了 多 种 选择 工具 ， 主 要 有 “选择 工具 ”、“ 部 分 选取 工具 ” 
和 “ 套 索 工具 ”。 选 择 工具 箱 中 的 “选择 工具 ”， 单 击 可 以 选取 对 象 ， 如 图 18-48 所 示 。 


图 18-48 选择 图 像 


18.5.2 ”移动 对 象 

移动 对 象 的 方法 通常 有 4 种 ， 分 别 是 利 
用 鼠标 、 键盘 上 的 方向 键 、“ 属 性 ”面板 和 “ 信 
息 ” 面 板 进行 移动 。 

1. 鼠标 移动 对 象 

通过 鼠标 移动 对 象 是 最 常用 、 最 简单 
的 一 种 方法 。 利 用 鼠标 移动 对 象 的 具体 方 
法 如 下 : 

首先 选取 一 个 或 多 个 对 象 。 再 将 鼠标 移 
动 到 被 选中 的 对 象 上 ， 按 住 鼠标 左 键 不 放 进 
行 拖 动 ， 可 以 将 对 象 移动 到 相应 的 位 置 。 如 
果 在 拖 动 的 同时 ， 按 住 Shift 键 不 放 ， 则 只 能 
进行 水 平 、 垂 直 或 45” 角 方向 的 移动 。 

2. 利用 方向 键 

使 用 鼠标 移动 对 象 的 缺点 是 不 够 精确 ， 
不 容易 进行 细微 的 操作 ， 而 使 用 方向 键 来 移 
动 对 象 则 要 精确 得 多 。 利 用 方向 键 移动 对 象 
的 具体 方法 如 下 : 

首先 选取 一 个 或 多 个 对 象 。 再 按 相应 的 
方向 键 (上 、 下 、 左 、 右 ) 来 移动 对 象 ， 一 
次 移动 一 个 像素 。 如 果 在 按 住 方向 键 的 同时 
按 住 Shift 键 ， 则 一 次 可 以 移动 8 个 像素 。 

3. 利用 “属性 ”面板 

选取 一 个 或 多 个 对 象 。 在 “属性 ”面板 
中 的 X 和 立 文本 框 中 输入 相应 的 数值 ， 然 后 
按 Enter 键 即 可 将 对 象 移动 到 指定 的 位 置 ， 如 
图 18-49 所 示 。 

4. 利用 “信息 ”面板 移动 对 象 

选取 一 个 或 多 个 对 象 。 执行 “窗口 ”|“ 信 
息 ” 命 令 ， 打开“ 信息 ”面板 ， 如 图 18-50 所 
示 。 在 X 和 YY 文本 框 中 输入 相应 的 数值 ， 然 
后 按 Enter 键 即 可 将 对 象 移动 到 指定 的 位 置 。 


变形 处 理 


图 18-49 “属性 ”面板 


忆 册 


红 
绿 


图 18-50 


18.5.3 ”复制 对 象 

复制 对 象 的 具体 操作 步骤 如 下 : 
国 选 中 需要 复制 的 对 象 , 执行 “编辑 ”|“ 复 制 ” 
命令 ， 或 者 按 Ctrl 十 C 组 合 键 ， 复 制 对 象 。 
02 执行 “编辑 ” |“ 粘贴 ”命令 ， 或 者 按 Ctrl 
十 V 组 合 键 ， 粘 贴 对 象 ， 如 图 18-51 所 示 。 


“信息 ”面板 


图 18-51 复制 对 象 


对 Flash 中 的 图 形 对 象 ， 既 可 以 单独 执行 变形 操作 ， 也 可 以 将 旋转 、 缩 放 、 倾 余 和 扭曲 等 


多 种 变形 操作 组 合 在 一 起 执行 。 
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18.6.1 缩放 对 象 
缩放 对 象 是 将 选中 的 图 形 对 象 按 比 例 放 大 或 缩小 ， 也 可 在 水 平 或 垂直 方向 分 别 放 大 或 缩小 
对 象 。 
缩放 对 象 可 以 选择 以 下 任意 一 种 方法 : 
。 ”选中 缩放 对 象 ， 将 鼠标 移动 至 矩形 框 各 边 中 点 的 控制 点 上 ， 然 后 按 下 鼠标 左 键 不 放 进 
行 拖 动 ， 可 以 单独 地 调整 对 象 的 长 度 和 宽度 ， 如 图 18-52 和 图 18-53 所 示 。 


"Ee 


图 18-52 水 平 缩放 图 18-53 垂直 缩放 
。 选中 缩放 对 象 , 将 鼠标 移动 至 矩形 框 的 4 个 项 点 上 , 当 指 针 变 为 倾斜 的 双向 箭头 形状 时 ， 
按 下 鼠标 左 键 不 放 进 行 拖 动 ， 可 以 同时 对 对 象 的 长 度 和 宽度 进行 缩放 ， 如 图 18-54 和 
图 18-55 所 示 。 


图 18-54 缩小 图 18-55 放大 


18.6.2 ”旋转 对 象 

旋转 对 象 的 具体 操作 步骤 如 下 : 
i 选择 工具 箱 中 的 “任意 变形 工具 ”， 在 工具 箱 下 方 的 选项 中 单 击 “旋转 与 倾斜 ”按钮 ， 如 
图 18-56 所 示 。 


而 将 鼠标 移动 到 矩形 框 顶点 旁边 ， 当 鼠标 指针 变 为 轩 形 状 时 ， 按 住 鼠 标 左 键 不 放 进行 旋转 ， 
如 图 18-57 所 示 。 
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扭曲 变形 不 是 缩放 、 旋 转 等 简单 的 变形 ， 
而 是 使 对 象 的 形状 本 身 发 生 本 质 性 的 变化 ， 
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图 18-57 旋转 对 象 


18.6.3 ”扭曲 对 象 


具体 操作 步骤 如 下 : 


咖 选 择 图 像 对 象 , 执行 “修改 ”|“ 分 离 ”命令 ， 
分 离 图 像 ， 如 图 18-58 所 示 。 
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图 18-58 分 离 图 像 


02 选择 工具 箱 中 的 “任意 变形 工具 ”， 在 下 


面 的 附属 选项 中 单 击 “ 扭 


”按钮 ， 在 对 象 


+ ee 


的 周围 出 现 了 控制 点 ， 如 图 18-59 所 示 。 


图 18-59 单 击 “扭曲 ”按钮 
吗 用 鼠标 按 住 控 制 点 进行 拖 动 ， 可 以 扭曲 对 


象 ， 如 图 18-60 所 示 。 


图 18-60 扭曲 对 象 


04 用 同样 的 方法 ， 再 次 扭 
所 示 。 


有 对象， 如 图 18-61 


图 18-61 再 次 扭曲 对 象 


综合 实战 


下 面 将 通过 实例 讲述 使 用 Flash 绘图 工具 和 文本 工具 来 制作 网 页 中 的 图 像 。 
实战 1 一 一 绘制 天 气 图 标 

下 面 使 用 Flash 绘制 天 气 图 标 ， 效 果 如 图 18-62 所 示 ， 具 体操 作 步骤 如 下 : 
最 终 文件 ， | 最 终 文件 /CH18/ 多 彩 文字 fla 


图 18-62 多 彩 文字 


呀 启动 Flash CC, 执行 “文件 ”| “新建 ”命令 ， 图 18-64 新 建文 档 
弹出 “新 建文 档 ”对 话 框 , 在 该 对 话 框 中 将 “ 宽 ” 
设置 为 923、“ 高 ”设置 为 486， 如 图 18-63 
所 示 。 


mTRjpy Tajpg BRTRApg 。 名 笔 T 且 jpg 


- Sy El HH 一: 
加 


图 18-65 “导入 ”对 话 框 


图 18-63 “新 建文 档 ” 对 话 框 


02 单 击 “ 确 定 ”按钮 ， 新 建 空白 文档 ， 如 图 
18-64 所 示 。 

吗 执行 “文件 ”|“ 导 入 ”|“ 导 入 到 舞台 ”命令 ， 
弹出 “导入 ”对 话 框 ， 在 该 对 话 框 中 选择 “多 
彩 文字 jpg”， 如 图 18-65 所 示 。 

吗 单 击 “ 打 开 ” 按 钮 ， 导 入 图 像 文件 ， 如 图 
18-66 所 示 。 


图 18-66 导入 图 像 文件 


Se 

> 。 
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本 选择 工具 箱 中 的 文本 工具 ， 打 开 “ 属 性 ” ， 在 下面 设置 相应 的 渐变 颜色 , 如 图 18-70 所 示 。 
面板 ， 设 置 文本 的 属性 ， 如 图 18-67 所 示 。 


图 18-67 设置 文本 的 属性 
西单 击 “ 时 间 轴 ”面板 中 的 “新 建 图 层 ” 按 钮 ， 中 设置 好 以 后 ， 选 择 工 具 箱 中 的 填充 工具 ， 
新 建 “ 图 层 2”。 在 文档 中 单 击 并 输入 文字 “ 幸 ， 即 可 对 文本 进行 颜色 填充 ， 如 图 18-71 所 示 。 
福 大 道 ”， 如 图 18-68 所 示 。 = 


图 18-70 “颜色 ”面板 


图 18-71 填充 颜色 


而 选择 工具 箱 中 的 “任意 变形 工具 ”， 在 其 
i es 注 颁 ,附属 选项 中 选择 “扭曲 ”选项 ， 在 文档 中 即 
吧 选中 文字 ， 按 两 次 CtltB 组 合 键 ， 对 文字 可 对 文本 进行 相应 的 扭曲 ， 如 图 18-72 所 示 。 
进行 分 离 ， 如 图 18-69 所 示 。 _ 


图 18-68 输入 文字 


图 18-72 扭曲 


图 18-69 分 离 文本 实 成 一 一 制作 雪花 文字 
08 执行 “窗口 ” |“ 颜色 ”命令 ， 打 开 “ 颜 色 ” 本 节 讲 述 制作 雪花 文字 ， 效 果 如 图 18-73 
面板 ， 将 “颜色 类 型 ”设置 为 “线性 渐变 ”， 所 示 ， 具 体操 作 步 骤 如 下 : 


满 1000 立 藉 50 
9 元 起 
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图 18-73 雪花 文字 效果 


原始 文件 : 
最 终 文件 : 


原始 文件 /CH18/ 雪花 文字 效果 jpg 
最 终 文件 /CH18/ 雪花 文字 效果 fla 


0 启动 Flash CC， 新 建 一 个 空白 文档 ， 导 入 
图 像 文件 “雪花 文字 jpg”， 如 ， 如 图 18-74 
所 示 。 


图 18-74 导入 图 像 文件 
唱 单 击 “ 时 间 轴 ”面板 中 的 “新 建 图 层 ” 按 
钮 ， 在 “图 层 1” 的 上 面 新 建 “ 图 层 2”， 如 
图 18-71 所 示 。 


图 18-75 新 建 “ 图 层 2” 


吗 选择 工具 箱 中 的 文本 工具 ， 在 舞台 中 输入 
文本 “青春 无 价 ”， 如 图 18-76 所 示 。 
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第 18 章 


图 18-76 输入 文本 


嗓 执 行 两 次 “修改 ”| “分离 ”命令 ， 将 文本 
分 离 ， 如 图 18-77 所 示 。 


图 18-77 分 离 文本 


号 选择 工具 箱 中 的 “墨水 瓶 工具 ”， 在 文本 
边缘 进行 单 击 ， 文 本 效果 如 图 18-78 所 示 。 


图 18-78 填充 边缘 


酌 单 击 “ 确 定 ” 按 钮 , 设置 渐变 颜色 , 勾 选 “内 
发 光 ” 复 选 框 ， 在 弹出 的 对 话 框 中 设置 相应 
的 参数 ， 如 图 18-79 所 示 。 


Flash 绘图 基础 使 


图 18-79 设置 内 发 光 


本 章 小 结 

熟练 掌握 绘图 工具 的 使 用 也 是 Flash 学 习 的 关键 。 在 学 习 和 使 用 过 程 中 ， 应 当 清 楚 各 种 工 
有 具 的 用 途 ， 例 如 绘制 曲线 时 可 以 使 用 “椭圆 工具 ”和 “钢笔 工具 ”。 灵 活 运用 这 些 工具 ， 可 以 
绘制 出 棚 棚 如 生 的 矢量 图 ， 为 后 面 的 动画 制作 做 好 准备 工作 。 
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第 了 9 章 制作 简单 的 Flash 动画 


者 


讲述 了 图 层 的 一 些 基本 概念 ， 通 过 引导 层 和 和 遮 罩 层 动画 的 制作 讲述 其 


在 创作 比较 复杂 的 场景 及 动画 时 ， 整 个 动画 的 组 织 就 显得 极为 重要 。 
Fj 中 最 有 利 的 组 织 工 具 。 在 Flash 中 ， 用 户 可 以 轻松 地 创建 丰富 多 彩 的 动画 效果 。 本 章 详 细 


而 图 层 就 是 动画 工作 


具体 的 应 


全 图 层 基本 操作 和 管理 
全 创建 逐 帧 动画 


ba 
4 


图 层 基 本 操作 和 管理 


通过 将 不 同 的 对 象 (如 背景 图 像 或 元 件 )》 放置 在 不 


到 上 


19. 


Bud 


由 


同位 置 


不 同 的 方式 对 动画 进行 定位 、 


1.1 图 层 的 概念 


使 用 图 层 有 助 于 内 容 的 整理 。 
-又 有 其 自己 内 部 的 层 伙 顺序 。 


在 Flash 动画 中 ， 图 层 就 像 


氏 重 登 在 一 起 就 能 组 成 一 幅 幅 复杂 
面 图 层 的 一 些 


的 


内 容 ， 但 如 果 上 


来 更 有 


容 。 在 Flash 中 ， 


云 


多 个 
影片 结构 


19. 


图 层 ， 在 影片 中 增 力 


零乱 ， 所 以 使 
1.2 创建 新 图 层 


新 建 一 个 Flash 文档 之 后 , 它 只 包含 一 个 层 , 在 “时 间 轴 ”面板 中 也 可 为 


新 建 图 层 有 以 下 几 种 方法 : 


每 个 图 层 者 


离 


分 离 和 重新 排序 等 操 


每 一 个 图 层 上 都 可 以 


- 张 张 透明 的 纸 ， 在 每 
的 画面 。 其 中 上 面 
区 域 没 有 内 容 ， 


补 间 动 画 的 制作 
利用 图 层 制作 动画 


作 。 


包含 任何 数量 的 对 


图 层 中 的 内 容 ， 本 
透 过 这 些 区 域 就 可 


是 相互 独立 的 ， 拥 有 独立 的 时 间 角 
层 上 任意 修改 图 层 中 的 内 容 而 不 会 影响 到 其 他 图 层 的 内 容 。 

图 层 有 许多 好 处 ， 例 如 ， 图 层 使 影片 中 的 图 形 对 象 能 够 互相 层 营 ， 
次 感 。 所 以 在 影片 制作 过 程 中 ， 用 户 可 以 根据 
图 层 不 会 改变 最 终 输 出 的 动画 
图 层 的 基本 原则 就 是 要 控制 好 


图 层 的 数量 。 


单 击 “时 间 轴 ”面板 底部 的 “新 建 图 层 ” 按 钮 ， 即 可 新 建 图 层 ， 轨 


同 的 图 层 上 ， 动 画 


制作 者 可 以 很 容易 做 


象 ， 这 些 对 象 在 该 图 


- 张 纸 上 面 可 以 绘制 不 同 的 对 象 ， 将 这 


以 遮 住 下 面 图 层 中 相 
以 看 到 下 面 图 层 相 同 


和 独立 的 帧 ， 可 以 在 


这 样 整个 动画 看 起 


图 形 和 动画 的 需要 在 动画 中 加 入 并 组 织 
文件 的 大 小 ， 但 是 妨 


果 图 层 过 多 ， 会 使 


其 添加 更 多 的 图 层 。 


图 19-1 所 示 。 


jy 
网 页 设计 与 网 站 建设 完全 实战 手册 
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图 19-1 新 建 图 层 
。 执行 “插入 ”|“ 时 间 轴 ”|“ 图 层 ” 命 令 ， 
也 可 以 插入 图 层 ， 如 图 19-2 所 示 。 


伟 


辣 (C 


场景 (S) 


帧 (有 F5 
关键 帧 (0) 
衬 白 关键 幢 (B) 


图 19-2 新 建 图 层 


。 在 “时 间 轴 ”面板 中 己 有 的 图 层 上 ， 
单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 

“插入 图 层 ” 命 令 ， 如 图 19-3 所 示 ， 

即 可 插入 一 个 图 层 。 


图 19-3 新 建 图 层 


19.1.3 ”创建 和 编辑 图 层 文件 来 


一 般 新 建 的 Flash 文档 只 有 一 个 默认 的 图 
层 ， 即 “图 层 1”， 如 果 需 要 再 添加 一 个 新 的 
图 层 ， 可 以 选择 以 下 几 个 操作 : 
。 单 击 “ 时 间 轴 ”面板 下 方 “插入 图 层 
文件 夹 ”按钮 ， 即 可 新 建 一 个 图 层 文 
件 夹 ， 如 图 19-1 所 示 。 
。 ”执行 “插入 ?| 时 间 轴 ?图 层 文件 夹 ” 
命令 ， 如 图 19-5 所 示 ， 即 可 新 建 一 
个 图 层 文件 夹 。 
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这 所 关键 帧 (8) 
图 19-5 选择 “图 层 文件 夹 ”命令 


。 在 “时 间 轴 ”面板 中 己 有 的 图 层 上 ， 
单 击 鼠 标 右键 ， 在 弹出 的 菜单 中 选择 
“插入 文件 夹 ” 命 令 ， 如 图 19-6 所 示 ， 
即 可 插入 一 个 图 层 文件 夹 。 


图 19-6 选择 “插入 文件 夹 ”选项 


当 “ 时 间 轴 ”面板 中 有 不 需要 的 图 层 时 ， 
可 以 将 其 删除 。 可 以 执行 以 下 操作 来 删除 图 层 

。 ”选中 要 删除 的 图 层 ， 单 击 “ 时 间 轴 ” 
面板 中 的 “删除 图 层 ” 按 钮 ， 如 图 
19-7 所 示 。 

。 ”选中 要 删除 的 图 层 ， 单 击 鼠 标 右键 在 
弹出 的 菜单 中 选择 “删除 图 层 ” 命 令 ， 
如 图 19-8 所 示 。 

。 ”选中 要 删除 的 图 层 ， 拖 到 删除 图 层 按 
钮 上 。 


图 19-8 删除 图 层 


19.1.4 引导 层 


引导 层 的 作用 是 辅助 其 他 图 层 中 的 对 象 
运动 或 定位 ， 例 如 可 以 为 一 个 物体 球 指 定 其 
运动 轨迹 。 引 导 层 有 以 下 特点 : 
。 引导 层 中 的 对 象 必须 是 打 散 的 图 形 ， 
也 就 是 画 的 线 不 能 组 合 。 

。 ”被 引导 的 图 层 在 引导 层 的 下 面 ， 并 且 
缩 进 。 

。 图 片 吸附 到 引导 线 时 一 定 要 准 ， 位 置 
不 准确 一 定 不 行 。 

创建 引导 层 的 具体 操作 步骤 如 下 
1 单 击 选中 要 创建 引导 的 图 层 ， 单 击 鼠 标 右 
键 ， 在 弹出 的 快捷 菜单 中 选择 “添加 传统 运 
动 引 导 层 ”命令 ， 如 图 19-9 所 示 。 


图 19-9 选择 “添加 传统 运动 引导 层 ”命令 
02 选 择 以 后 即 可 创建 引导 层 ,如 图 19-10 所 示 。 


图 19-10 创建 引导 层 


19.1.5 ” 遮 直 层 

遮 罩 动画 也 是 Flash 中 常用 的 一 种 技巧 。 
用 户 还 可 以 利用 动作 和 行为 ， 让 遮 单 层 动 起 
来 ， 这 样 便 可 以 创建 各 种 各 样 的 动态 效果 的 
动画 。 对 于 用 做 遮 罩 的 填充 形状 ， 可 以 使 用 
补 间 形状 功能 。 对 于 文字 对 象 、 图 形 元 件 实 
例 或 影片 剪辑 实例 ， 可 以 使 用 补 间 动 画 。 当 
使 用 影片 剪辑 实例 作为 遮 音 时， 还 可 以 让 这 
单 沿 着 路 径 运动 。 

创建 遮 单 层 的 具体 操作 步骤 如 下 : 
国 选择 要 创建 遮 单 的 图 层 ， 单 击 鼠 标 右键 
在 弹出 的 快捷 菜单 中 选择 “ 遮 单 层 ” 命 令 ， 
如 图 19-11 所 示 。 


19-11 选择 “ 遮 单 层 ”命令 
02 选 择 以 后 即 可 创建 遮 单 层 ,如 图 19-12 所 示 。 


图 19-12 创建 遮 单 层 


网 页 设计 与 网 站 建设 完全 实战 手册 


创建 逐 帧 动画 


逐 帧 动画 需要 用 户 更 改 影 片 每 一 帧 中 的 舞台 内 容 。 简 单 的 逐 帧 动画 并 不 需要 用 户 定义 过 多 
的 参数 ， 只 需要 设置 好 每 一 帧 ， 即 可 播放 动画 。 逐 帧 动画 最 适合 于 每 一 帧 中 的 图 像 都 在 更 改 ， 
而 不 仅仅 是 简单 地 在 舞台 中 移动 的 复杂 动画 。 逐 帧 动画 增加 文件 大 小 的 速度 比 补 间 动 画 快 得 多 ， 
所 以 逐 帧 动画 的 体积 一 般 会 比 普通 动画 的 体积 大 。 在 逐 帧 动画 中 , Flash 会 保存 每 个 完整 帧 的 值 。 

下 面 通过 实例 的 制作 来 说 明 逐 帧 动画 的 
制作 流程 ， 本 例 设计 的 逐 帧 动画 效果 如 图 
19-13 所 示 。 


图 19-15 新 建文 档 


图 19-13 逐 帧 动画 


原始 文件 ， | 原始 文件 /CH19/ 逐 帧 动画 jpg 
最 终 文 件 : | 最 终 文件 /CH19/ 逐 帧 动画 fla 


呵 启动 Flash， 执 行 “ 文 件 ” | “新建 ”命令 
弹出 “新 建文 档 ” 对 话 框 ,在 对 话 框 中 将 “ 宽 ” 
设置 为 798 像素 、“ 高 ”设置 为 498 像素 、“ 帧 
频 ” 设 置 为 8， 如 图 19-14 所 示 。 


a] EE 1 WW 


~ [MF Cw | 


mo | [mw 


19-16 “导入 ”对 话 框 


吧 单 击 “ 确 定 ” 按 钮 ， 导 入 图 像 文 件 ， 如 图 
19-17 所 示 。 


图 19-14 “新 建文 档 ” 对 话 框 


覃 单 击 “ 确 定 ” 按 钮 ， 新 建 空白 文档 ， 如 图 
19-15 所 示 。 

本 执行 “文件 ”| “导入 ”|“ 导 入 到 舞台 ”命令 ， 
弹出 “导入 ”对 话 框 ， 在 该 对 话 框 中 选择 图 
像 文件 “ 逐 帧 动画 jpg”， 如 图 19-16 所 示 。 图 19-17 导入 图 像 文件 
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号 选中 第 2 帧 , 按 F6 键 插入 关键 帧 。 在 工具 箱 中 选择 文本 工具 , 然后 在 舞台 中 输入 文字 “ 圣 ”， 
如 图 19-18 所 示 。 
06 选中 第 3 帧 , 按 F6 键 插入 关键 帧 。 在 工具 箱 中 选择 文本 工具 , 然后 在 舞台 中 输入 文字 “ 诞 ”， 
如 图 19-19 所 示 。 


图 19-18 输入 文本 图 19-19 输入 文本 
吧 选 中 第 3 帧 ， 按 F6 键 插入 关键 帧 。 在 工具 箱 中 选择 文本 工具 ,然后 在 舞台 中 输入 文字 “ 快 ”， 
如 图 19-20 所 示 。 
08 选中 第 4 帧 ， 按 F6 键 插入 关键 帧 。 在 舞台 中 输入 文字 “ 乐 ”， 在 第 20 帧 按 F5 键 插入 帧 ， 
如 图 19-21 所 示 。 保 存 文档 即 可 预览 效果 。 


圣诞 快乐 


, 必 基 鳃 Py 
le 


图 19-20 输入 文本 图 19-21 输入 文本 


补 间 动画 的 制作 


Flash 需要 保存 每 一 帧 的 数据 ， 而 在 补 间 动 画 中 ，Flash 只 需 保 存 帧 之 间 不 同 的 数据 ， 使 用 


补 间 动 画 还 能 尽量 减 小 文件 的 大 小 。 因 此 在 制作 动画 时 ， 应 用 最 多 的 是 补 间 动 画 。 补 间 动 画 是 
一 种 比较 有 效 的 产生 动画 效果 的 方式 。 

Flash 能 生成 两 种 类 型 的 补 间 动 画 ， 一 种 是 运动 补 间 ， 另 一 种 是 形状 补 间 。 

运动 补 间 需 要 在 一 个 点 定义 实例 的 位 置 、 大 小 及 旋转 角度 等 属性 ， 然 后 才 可 以 在 其 他 位 置 
改变 这 些 属 性 ， 从 而 由 这 些 变化 产生 动画 ， 形 状 补 间 需 要 在 一 个 点 绘制 一 个 图 形 ， 然 后 在 其 他 
的 点 改变 图 形 或 者 绘制 其 他 的 图 形 。Flash 能 在 它们 之 间 计 算出 插值 或 者 图 形 , 从 而 产生 动画 效果 。 
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实战 1 一 一 创建 改变 对 和 象 大 小 的 动画 
形状 补 间 动 画 适 用 于 图 形 对 象 。 在 两 个 
关键 帧 之 间 可 以 制作 出 图 形变 形 效果 ， 让 一 
种 形状 可 以 随时 间 变 化 成 另 一 个 形状 ; 还 可 
以 使 形状 的 位 置 、 大 小 和 颜色 进行 渐变 。 下 
面 制作 如 图 19-22 所 示 的 改变 对 象 大 小 的 动 
画 ， 具 体操 作 步 又 如 下 : 


图 19-22 改变 对 象 大 小 的 动画 


原始 文件 ，| 原始 文件 /CH19/ 改变 对 象 大 小 .jpg 


最 终 文件 /CH19/ 改变 对 象 大 小 动 
画 .fla 


吗 新 建 一 个 空白 文档 ， 导 入 图 像 “ 改 变 对 象 
大 小 jpg”， 如 图 19-23 所 示 。 


图 19-23 导入 图 像 


咀 执 行 “ 修 改 ”|“ 转 换 为 元 件 ” 命 令 , 弹出 “ 转 
换 为 元 件 ”对 话 框 , 将 “类 型 ”设置 为 “图 形 ”， 
如 图 19-24 所 示 。 
03 单 击 “确定 ”按钮 ， 将 其 
如 图 19-25 所 示 。 


转换 为 图 形 元 件 ， 


图 19-24 “转换 为 元 件 ” 对 话 框 


图 19-25 转换 为 图 形 元 件 


吗 在 第 50 帧 按 F6 键 插入 关键 帧 ， 选 择 工具 
箱 中 的 “任意 变形 ”工具 ， 在 舞台 中 调整 图 
形 的 大 小 ， 如 图 19-26 所 示 。 


图 19-26 插入 关键 帧 


05 选择 1 ~ 50 帧 之 间 的 任意 一 帧 ， 单 击 鼠 标 
右键 ， 在 弹出 的 快捷 菜单 中 选择 “创建 传统 
形状 ”命令 ， 如 图 19-27 所 示 。 

06 选择 以 后 创建 补 间 动 画 ,， 如 图 19-28 所 示 。 
保存 并 预览 动画 效果 如 图 19-23 所 示 。 


图 19-28 创建 传统 形状 动画 


实战 2 一 一 创建 形状 补 间 动 画 

形状 补 间 需 要 在 一 个 点 绘制 一 个 图 形 ， 然 
后 在 其 他 的 点 改变 图 形 形 状 或 者 绘制 其 他 的 图 
形 。Flash 能 在 它们 之 间 计 算出 插值 或 者 图 形 ， 
从 而 产生 动画 效果 。 下 面 制作 如 图 19-29 所 示 
的 形状 补 间 动 画 ， 具 体操 作 步 又 如 下 : 


图 19-29 形状 补 间 动 画 


- (© 

第 19 章 ”制作 简单 的 Flash 动画 
原始 文件 : 
最 终 文件 : 


呀 新 建 一 个 空白 文档 ， 导 入 图 像 “ 形 状 补 
间 jpg”， 如 图 19-30 所 示 。 


原始 文件 /CH19/ 形状 补 间 jpg 
最 终 文件 /CH19/ 形状 补 间 fla 


图 19-30 新 建 图 层 
吗 选择 工具 箱 中 的 “多 角 星 形 工具 ”， 执 行 
“窗口 ” |“ 属 性” 命令， 打开 “属性 ”面板 ， 
如 图 19-31 所 示 。 


图 19-31 单 击 “ 选 项 ” 
吗 在 “属性 ”面板 中 单 击 “ 选 项 ”按钮 ， 弹 
出 “工具 设置 ”对 话 框 , 在 该 对 话 框 中 “样式 ” 
下 拉 列 表 选 择 “ 星 形 ”， 如 图 19-32 所 示 。 


图 19-32 


“工具 设置 ” 则 


| 


色 ， 在 舞 ，08 选择 “图 层 2” 的 1-40 帧 之 间 的 任意 一 帧 ， 


05 在 工具 箱 中 将 填充 颜色 设置 为 
台中 绘制 星 形 ， 如 图 19-33 所 示 。 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 创 


建 补 间 形 状 ” 命 令 ， 如 图 19-36 所 示 。 


图 19-33 绘制 星 形 
06 在 “图 层 1” 的 第 40 帧 按 F5s 键 插入 帧 ， 


在 “图 层 2” 的 第 40 帧 按 F6 键 插 入 关键 帧 ， ， 了 加 选择 以 后 创建 补 间 形 状 动画 ， 如 图 9-34 所 
如 图 19-34 所 示 。 示 。 如 图 19-37 所 示 。 


图 19-36 选择 “创建 补 间 形 状 ” 命 令 


图 19-34 插入 帧 和 关键 帧 
吧 将 星 形 删除 , 选择 工具 箱 中 的 “椭圆 工具 ”， 
在 工具 箱 中 将 填充 颜色 设置 为 绿色 ， 在 舞台 
中 绘制 椭圆 ， 如 图 19-35 所 示 。 


图 19-38 预览 动画 效果 
图 19-35 绘制 顶 贺 
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利用 图 层 制作 动画 


要 创建 效果 较 好 的 Flash 动画 就 需要 为 一 个 动画 创建 多 个 图 层 ， 以 便于 在 不 同 的 图 层 中 制作 
不 同 的 动画 ， 通 过 多 个 图 层 的 组 合 形成 复杂 的 动画 效果 。 下 面 讲述 引导 层 和 遮 音 层 动画 的 制作 。 
实战 3 一 一 创建 沿 直线 运动 的 动画 上 唱 在 对 话 框 中 选择 要 导入 的 图 像 “ 引 导 动 

在 引导 层 中 ， 可 以 像 在 其 他 图 层 中 一 样 ” 画 jpg” 和 “小 鸟 png”, 将 图 像 导 入 到 “ 库 ” 
制作 各 种 图 形 和 引入 元 件 ， 但 最 终 发 布 时 引 ”面板 中 ， 如 图 19-41 所 示 。 

导 层 中 的 对 象 不 会 显示 出 来 ， 按 照 引 导 层 的 
功能 不 同 可 以 将 其 分 为 两 种 ， 分 别 是 普通 引 
导 层 和 运动 引导 层 。 

下 面 创建 一 个 沿 直线 运动 的 动画 ， 如 图 

19-39 所 示 ， 具 体操 作 步 骤 如 下 : 


图 19-41 “ 库 ” 面 板 
图 19-39 直线 运动 动画 吗 将 “ 库 ” 面 板 中 的 图 像 “ 引 导 动 画 jpg” 


拖 到 舞台 中 ， 调 整 其 位 置 ， 如 图 19-42 所 示 。 


原始 文件 /CH19/ 直线 运动 jpg、 小 
岛 .png 
最 终 文件 /CH19/ 直线 运动 la 。 | 


| 最 终 文件 : 


丽 新 建 一 个 空白 文档 ,执行 “文件 ”导入 ” 导 ”车 SU 
入 到 库 ” 命 令 ， 弹 出 “导入 到 库 ” 对 话 框 ， - 
如 图 19-40 所 示 。 


SA 


图 19-42 拖 入 图 像 


吗 单 击 “ 时 间 轴 ”面板 左下 角 的 “新 建 图 层 ” 
和 按钮 ， 新 建 一 个 “图 层 2”， 如 图 19-43 所 示 。 
”ee np es 西 将 “ 库 ” 面 板 中 的 图 像 “小 鸟 png” 拖 到 
(se) Le 舞台 中 ， 如 图 19-44 所 示 。 
图 19-40 “导入 到 库 ”对 话 框 
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人 
网 页 设计 与 网 站 建设 完全 实战 手册 


08 选中 “图 层 1” 的 第 50 帧 ， 按 F5 键 插入 帧 ， 
选中 “图 层 2” 的 第 50 帧 ， 按 F6 键 插入 关键 
帧 ， 如 图 19-47 所 示 。 


图 19-47 插入 关键 帧 


09 在 “图 层 2” 上 单 击 鼠标 右键 ， 在 弹出 的 
快捷 菜单 中 选择 “添加 传统 运动 引导 层 ” 命 令 ， 
如 图 19-48 所 示 。 


图 19-44 拖 入 图 像 


06 选 中 图 像 , 执行 “修改 "| 转换 为 元 件 ” 命 令 ， 
弹出 “转换 为 元 件 ” 对 话 框 ， 在 对 话 框 的 “名 
称 ”文本 框 中 输入 名 称 ， 在 “类 型 ”下 拉 列 
表 选 择 “ 图 形 ” 选 项 ， 如 图 19-45 所 示 。 


图 19-48 选择 “添加 传统 运动 引导 层 ” 命 令 


0 创建 运动 引导 层 ， 选 中 运动 引导 层 的 第 1 
帧 ， 选 择 工具 箱 中 的 “线条 工具 ”， 在 运动 
硬 单 击 “ 确 定 ” 按 钮 , 将 图 像 转换 为 图 形 元 件 ， 引导 层 中 绘制 一 条 直线 ， 如 图 19-49 所 示 。 

如 图 19-46 所 示 。 = 


图 19-45 “转换 为 元 件 ” 对 话 框 


图 19-46 转换 为 图 形 元 件 国 9 答 利生 的 
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辐 选 中 “图 层 2” 的 第 1 帧 ， 将 图 形 元 件 拖 
动 到 路 径 的 起 始点 ， 如 图 19-50 所 示 。 


图 19-50 拖 动 元 件 


申 选 中 “图 层 2” 的 第 5 帧 ， 将 图 形 元 件 拖 
动 到 路 径 的 终点 ， 如 图 19-51 所 示 。 


图 19-51 拖 动 元 件 


申 将 光标 放置 在 “图 层 2” 中 第 1 帧 一 第 30 
帧 之 间 的 任意 位 置 ， 单 击 鼠 标 右键 ， 在 弹出 
的 快捷 菜单 中 选择 “创建 传统 补 间 ”命令 ， 

如 图 19-52 所 示 。 


图 19-52 选择 “创建 传统 补 间 ” 命 令 


第 19 章 制作 简单 的 Flash 动画 


狂 选中 创建 的 补 间 动 画 ， 如 图 19-53 所 示 。 


图 19-53 创建 传统 补 间 动 画 


实战 4 一 创建 遮 罩 动画 

遮 罩 动画 也 是 在 Flash 中 制作 动画 常用 的 
一 种 技巧 。 遮 罩 动 画 就 好 比 在 一 个 板 上 打 了 
各 种 形状 的 孔 ， 透 过 这 些 孔 ， 可 以 看 到 下 面 
的 图 层 。 遮 罩 项 目 可 以 是 填充 的 形状 、 文 字 
对 象 、 图 形 元 件 的 实例 或 影片 剪辑 。 

下 面 利用 遮 音 层 制 作 动画 ， 效 果 如 图 
19-54 所 示 ， 具 体操 作 步 骤 如 下 : 


a_U 


图 19-54 遮 罩 动画 


原始 文件 | 原始 文件 /CH18/ 遮 音 动画 jpg 


最 终 文件 “| 最 终 文件 /CH18/ 玫 单 动画 fla 


三 新 建 一 个 空白 文档 ,执行 “文件 尘 导 入 尝 导 
入 到 舞台 ”命令 ， 导 入 图 像 “ 遮 单 动画 jpg”， 
如 图 19-55 所 示 。 

0 单 击 “ 时 间 轴 ”面板 左下 角 的 “新 建 图 层 ” 
按钮 ， 新 建 一 个 “图 层 2”， 如 图 19-56 所 示 。 
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者 、 夏 糖果 新 品 风 春 、 夏 糖果 新 品 
满 200 减 20 $. 满 200 减 20 
折 BY 


图 19-55 导入 图 像 图 19-56 新 建 “ 图 层 2” 


03 选择 工具 箱 中 的 “和 矩形 工具 ”， 在 图 像 上 绘制 一 个 矩形 ， 如 图 19-57 所 示 。 
咀 选择 工具 箱 中 的 “椭圆 工具 ”， 在 图 像 上 绘制 一 个 椭圆 ， 如 图 19-58 所 示 。 


图 19-57 绘制 矩形 图 19-58 绘制 椭圆 


本 在 “图 层 2” 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 遮 单 层 ” 命 令 ， 如 图 19-59 所 示 。 
06 选择 选项 ， 遮 音效 果 如 图 19-60 所 示 。 


$ 满 200 减 20 
折 包 邮 ! 


图 19-59 选择 “ 遮 单 层 ” 命 令 图 19-60 遮 唱 效果 
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本 章 小 结 

本 章 通 过 详细 的 例子 ， 主 要 介绍 了 Flash 中 几 种 简单 动画 的 创建 方法 ， 包 括 逐 帧 动画 和 补 
间 动 画 ， 补 间 动 画 又 包含 运动 渐变 动画 和 形状 渐变 动画 两 大 类 动画 效果 ， 除 此 之 外 ， 还 有 引导 
动画 和 遮 日 动画 这 两 种 特殊 的 动画 效果 。 


第 DO 章 制作 声音 和 视频 动画 


制作 一 个 复杂 的 动画 仅 使 用 Flash 软件 自 带 的 绘图 工具 是 远 远 不 够 的 ， 这 就 需要 从 外 部 导 


入 创作 时 所 需要 的 素材 。 利 用 Flash 提供 的 一 些 控制 音频 的 方法 可 以 使 声音 独立 于 时 间 轴 循环 
播放 ， 也 可 以 专门 为 动画 配 上 一 段 音 乐 ， 或 为 按钮 添加 某 种 声音 ， 还 可 以 设置 声音 的 渐 入 渐 出 
效果 。 


令 导入 声音 文件 令 ”声音 属性 的 编辑 
令 ”添加 声音 令 导入 视频 文件 


导入 声音 文件 


Flash 提供 了 强大 的 导入 功能 ， 几 乎 胜任 各 种 文件 类 型 的 导入 ， 特 别 是 Flash 对 声音 的 支持 
非常 出 色 ， 可 以 在 Flash 中 导入 各 种 声音 文件 。 
20.1.1 声音 的 类 型 

存储 音频 文件 的 格式 是 多 种 多 样 的 ， 在 Flash 中 可 以 直接 引用 的 主要 有 WAV 和 MP3 两 种 
音频 格式 的 文件 ，AIFF 和 AU 格式 的 音频 文件 使 用 率 不 是 很 高 。 在 Flash 中 不 能 使 用 MIDI 格 
式 的 音频 文件 ， 如 果 要 使 用 此 格式 则 必须 使 用 JavaScript 脚本 语言 来 处 理 。 

WAV: WAV 格式 的 音频 文件 支持 立体 声 和 单 道 志 ， 也 可 以 是 多 种 位 分 辩 率 和 采样 率 。 在 
Flash 中 可 以 导入 各 种 音频 软件 创建 的 WAV 格式 的 音频 文件 。 

MP3: MP3 是 大 家 熟悉 的 一 种 数字 音频 格式 。 相 同 长 度 的 音频 文件 用 MP3 格式 存储 ， 一 
般 只 有 WAV 格式 的 110。 虽 然 MP3 格式 是 一 种 破坏 性 的 压缩 格式 ， 但 是 因为 其 取样 与 编码 的 
技术 优异 ， 其 音质 接近 CD， 体 积 小 ， 传 输 方便 ， 拥 有 较 好 的 声音 质量 ， 所 以 目前 的 计算 机 音 
乐 大 多 是 以 MP3 格式 输出 的 。Flash 中 默认 的 音频 输出 格式 就 是 MP3 格式 。 

ADPCM: ADPCM 格式 的 音频 文件 使 用 的 是 一 种 音频 的 压缩 模式 ， 可 以 将 声音 转换 为 二 
进 制 信息 ， 主 要 用 于 语言 处 理 。 
RAW: 使 用 RAW 格式 输出 是 不 对 音频 文件 进行 任何 压缩 ， 经 这 样 输出 后 的 动画 文件 会 占 
很 大 的 空间 , 所 以 很 难 在 Web 上 播放 .使 用 此 格式 的 好 处 是 可 以 保持 与 Flash 旧版 本 的 兼容 性 。 
20.1.2 ”导入 音频 文件 

在 Flash 中 可 以 导入 WAV、MP3 等 多 种 格式 的 声音 文件 。 当 将 声音 导入 到 文档 后 ， 将 与 
位 图 、 元 件 等 一 起 保存 在 “ 库 ” 面 板 中 。 和 其 他 元 件 一 样 ， 用 户 可 以 在 影片 中 以 各 种 方式 使 
这 个 声音 的 实例 而 不 对 原声 音 文件 构成 任何 影响 。 导 入 声音 文件 的 具体 操作 步骤 如 下 : 


地 @ © SS 
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第 20 章 ”制作 声音 和 视频 动画 


呈 启动 Flash, 打开 一 个 文档 , 如 图 20-1 所 示 。 吗 执 行 “文件”|“ 导 入 ”|“ 导 入 到 库 ” 命 令 ， 
Eee 弹出 “导入 到 库 ” 对 话 框 ， 如 图 20-3 所 示 。 


图 20-1 打开 文档 图 20.3 “导入 到 库 ” 对话 框 
咖 单 而“ 新建 图 层 ”按钮 , 新建“ 图 层 2”， 枚 在 “ 库 ” 面板 中 先 中 导入 的 声音 文件 ， 选 
中 “图 层 2” 的 第 1 帧 ， 将 “ 库 ” 面板 中 的 声 
音 文件 皂 动 到 该 帧 中 ， 即 可 添加 声音 ， 如 图 
20-4 所 示 。 


如 图 20-2 所 示 。 


图 20-2 新 建 “ 图 层 2” 


添加 声音 


一 个 精彩 的 Flash 动画 作品 仅仅 有 一 些 图 形 动画 效果 是 不 够 的 ， 可 以 给 图 形 、 按 钮 乃至 整 
个 动画 配 上 合适 的 背景 声音 ， 这 样 能 使 整个 作品 更 加 精彩 ， 具 有 画龙点睛 的 作用 ， 给 观众 带 来 
全 方位 的 艺术 享受 。 
20.2.1 ”轻松 为 按钮 添加 声音 

按钮 是 元 件 的 一 种 ， 它 可 以 根据 4 种 不 
同 的 状态 显示 不 同 的 图 像 ， 我 们 还 可 以 给 它 
加 入 音效 ,使 其 在 操作 时 具有 更 强 的 互动 性 。 
将 声音 导入 到 库 中 ， 然 后 就 可 以 将 声音 文件 
添加 到 动画 中 ， 如 图 20-5 所 示 。 具 体操 作 步 
又 如 下 : 


图 20-5 为 按钮 添加 声音 


et © 
(© OA oO 人 


DA 


和 网 页 设计 与 网 站 建设 完全 实战 手册 


原始 文件 ，| 原始 文件 /CH20/ 为 按钮 添加 声音 jpg 
最 终 文 件 : | 最 终 文 件 /CH20/ 为 按钮 添加 声音 fla 


呀 新建 一 个 空白 文档 ， 导 入 图 像 文件 ， 如 图 
20-6 所 示 。 


图 20-6 导入 图 像 文件 
02 执行 “插入 ”| “新建 元 件 ” 命 令 , 弹出 “ 创 
建新 元 件 ” 对 话 框 ， 在 对 话 框 中 的 “类 型 ” 
下 拉 列 表 选 择 “ 按 钮 ”选项 ， 如 图 20-7 所 示 。 


图 20-7 “创建 新 元 件 ” 对 话 框 


03 单 击 “ 确 定 ” 按 钮 ， 进 入 元 件 编辑 模式 ， 
如 图 20-8 所 示 。 


图 20-8 元 件 编辑 模式 
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区 选择 工具 箱 中 的 “和 矩形 工具 ”， 在 舞台 中 
绘制 矩形 ， 如 图 20-9 所 示 。 


图 20-9 绘制 矩形 


05 选择 工具 箱 中 的 文本 工具 ， 在 “属性 ” 面 
板 中 将 “字体 ”设置 为 “黑体 ”、 字 体 大 小 
设置 为 30, 在 舞台 中 输入 文本 “音乐 ”， 如 图 
20-10 所 示 。 


图 20-10 输入 文本 


06 单 击 “ 时 间 轴 ”面板 中 的 “新 建 图 层 ” 按钮 ， 
新 建 “ 图 层 2”， 如 图 20-11 所 示 。 


图 20-11 新 建 “ 图 层 2” 


叹 执 行 “文件 ”|“ 导 入 ”|“ 导 入 到 库 ” 命 令 ， 
在 弹出 的 “导入 到 库 ” 对 话 框 中 选择 声音 文件 ， 
单 击 “ 打 开 ” 按 钮 ， 将 声音 文件 导入 到 库 中 ， 
如 图 20-12 所 示 。 


图 20-12 导入 声音 


08 选中 “图 层 2” 的 “ 弹 起 ” 帧 ， 将 声音 
件 拖 入 到 其 中 ， 如 图 20-13 所 示 。 


图 20-13 拖 入 声音 文件 


09 单 击 “ 场 景 1”， 进 入 主场 景 ， 在 “ 库 ” 


面板 中 选择 创建 的 按钮 元 件 ， 将 其 拖 入 到 舞 
台中 相应 的 位 置 ， 如 图 20-14 所 示 。 


图 20-14 拖 入 元 件 


面 保存 文档 , 按 Cal+Enter 组 合 键 测试 影片 ， 
效果 图 20-15 所 示 ， 单 击 按钮 可 以 听 到 音乐 。 


图 20-15 测试 动画 效果 


20.2.2 为 影片 添加 声音 
下 面 讲述 如 何 为 影片 添加 声音 ， 如 图 
20-16 所 示 ， 具 体操 作 步 又 如 下 : 


原始 文件 | 原始 文件 /CH20/ 为 影片 添加 声音 jpg 


最 终 文件 | 最 终 文件 /CH20/ 为 影片 添加 声音 .fla 


图 20-16 为 影片 添加 声音 
白文 档 ， 导 入 图 像 文 件 ， 如 图 


个 空 


01 新 建 
20-17 所 示 。 


图 20-17 导入 图 像 文件 


网 页 设计 与 网 站 建设 完全 实战 手册 


吧 执行 “文件 ” |“ 导入 ”命令 ， 打 开 “ 导 入 
到 库 ” 对 话 框 ， 在 该 对 话 框 中 选择 声音 文件 ， 
如 图 20-18 所 示 。 


图 20-18 “导入 到 库 ” 对 话 框 


吗 单 击 “ 打 开 ” 按 钮 ， 导 入 音乐 文件 ， 如 图 
20-19 所 示 。 


吗 在 “ 库 ” 面 板 中 将 声音 文件 拖 入 到 文档 中 ， 
如 图 20-20 所 示 。 


声音 属性 的 编辑 


图 20-20 拖 入 声音 


为 动画 或 按钮 添加 声音 ， 直 接 播 放 ， 经 常会 出 现 一 些 问题 。 为 了 保证 声音 的 准确 播放 ， 需 


对 添加 的 声音 进行 编辑 。 


20.3.1 设置 声音 的 重复 播放 

在 “声音 ”属性 中 的 “效果 ”下 拉 列 表 
中 可 以 控制 声音 的 重复 播放 。 在 “效果 ”下 
拉 列 表 中 有 两 个 选项 ， 如 图 20-21 所 示 。 


图 20-21 设置 属性 


。 “重复 ”: 在 其 文本 框 中 输入 播放 的 
次 数 ， 默 认 播 放 一 次 。 

。 “循环 ”: 声音 可 以 一 直 不 停 地 循环 
播放 。 
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20.3.2 ”设置 声音 的 同步 方式 

同步 是 指 影 片 和 声音 文件 的 配合 方式 。 
可 以 决定 声音 与 影片 是 同步 播放 还 是 自行 播 
放 。 在 “同步 ”下 拉 列 表 中 提供 了 4 种 方式 ， 
如 图 20-22 所 示 。 


图 20-22 同步 方式 


“事件 ”: 必须 等 声音 全 部 下 载 完 毕 
后 才能 播放 动画 。 


© ~/o 
第 20 章 ”制作 声音 和 视频 动画 。 


。 “开始 ”: 如 果 选 择 的 声音 文件 已 在 时 间 轴 上 的 其 他 地 方 播放 过 了 ，Flash 将 不 会 再 
播放 这 个 声音 。 

。 “停止 ”: 可 以 使 正在 播放 的 声音 文件 停止 。 

。 “数据 流 ”: 将 使 动画 与 声音 同步 ， 以 便 在 Web 站 点 上 播放 。Flash 强制 动画 和 音频 
流 同 步 ， 将 声音 完全 附加 到 动画 上 。 


导入 视频 文件 


Flash 视频 具备 创造 性 的 技术 优势 ， 允许 把 视频 、 数据、 图形、 声音 和 交互 式 控制 融 为 一 体 ， 
从 而 创造 出 引人入胜 的 丰富 体验 。 


20.4.1 _ Flash 支持 的 视频 格式 
如 果 在 系统 上 安装 了 QuickTime 4 以 上 的 版 本 或 者 DirectX 7 以 上 版 本 ， 则 可 以 导入 各 种 
文件 格式 的 视频 剪辑 ， 包 括 MOV (QuickTime 影片 ) 、AVI (音频 视频 交叉 文件 ) 和 MPG/ 
MPEG。 
QuickTime 影片 文件 ， 扩展 名 为 * mov。 
Windows 视频 文件 : 扩展 名 为 *.avi。 
MPEG 影片 文件 : 扩展 名 为 *.mpg 和 *.mpeg。 
数字 视频 文件 ， 扩 展 名 为 *.dv 和 *.dvi。 
Windows Media 文件 : 扩展 名 为 *.asf 和 *.wmv。 
Macromedia Flash 视频 文件 ， 扩展 名 为 *.flv。 


20.4.2 在 Flash 中 嵌入 视频 

Flash CS6 具 有 创造 性 的 技术 优势 , 可 以 将 视频 镜头 融入 基于 Web 的 演示 文稿 , 允许 把 视频 、 
数据 、 图 形 、 声 音 和 交互 式 控制 等 融 为 一 体 ， 从 而 创造 出 引人入胜 的 丰富 经 验 。 导 入 视频 效果 
如 图 20-23 所 示 ， 具 体操 作 步 又 如 下 : 


图 20-23 导入 视频 效果 
最 终 文件 ， | 最 终 文件 /CH20/sp.fla 
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网 页 设计 与 网 站 建设 完全 实战 手册 


咖 新 建 一 个 空白 文档 , 执行 文件 状 导 入 于 导 ” 咀 选 择 以 后 , 添加 视频 文件 , 如 图 20- Wy 
入 视频 ”命令 ， 如 图 20-24 所 示 。 


图 20-27 添加 视频 文件 
咕 单 击 “ 下 一 步 ” 按 钮 ， 进 入 “ 设 定 外 观 ” 
02 弹出 “导入 视频 ”对 话 框 , 如 图 20-25 所 示 。 界面 ， 在 对 话 框 中 设置 外 观 的 颜色 和 外 观 ， 
, 加 如 图 20-28 所 示 。 


图 20-24 选择 “导入 视频 ”命令 


| 设 定 外 现 


图 20-25 “导入 视频 ”对 话 框 


3 单 击 文件 路 径 文本 框 后 面 的 “浏览 ”按钮 ， 
弹出 “打开 ”对 话 框 ， 在 对 话 框 中 选中 要 导 醒 单 击 “ 下 一 步 ” 按 钮 , 进入 “完成 视频 导入 ” 
入 的 视频 文件 ， 如 图 20-26 所 示 。 界面 ， 如 图 20-29 所 示 。 


图 20-28 “外 观 ” 界 面 


- [FR Cmptt mt 


[so EE 


图 20-26 “打开 ”对 话 框 图 20-29 “完成 视频 导入 ”界面 
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吧 单 击 “完成 ”按钮 ， 将 视频 文件 导入 到 舞台 中 ， 如 图 20-30 所 示 。 
08 保存 文档 ， 按 Ctrl+Enter 组 合 键 测试 影片 ， 效 果 如 图 20-31 所 示 。 


图 20-30 导入 到 舞台 中 图 20-31 测试 影片 


综合 实战 一 一 给 Flash 动画 片头 添加 声音 


本 章 介绍 了 声音 和 视频 的 导入 方法 ， 通 过 资源 的 导入 使 得 可 以 应 用 到 动画 中 的 资源 大 大 丰 
富 ， 因 此 制作 出 的 效果 也 更 加 丰富 了 。 下 面 讲 述 为 Flash 动画 添加 声音 ， 效 果 如 图 20-32 所 示 。 


ua 


唱 执 行 “ 文 件 ”|“ 导 入 ”命令 ， 打开 “导入 
到 库 ” 对 话 框 ， 在 该 对 话 框 中 选择 声音 文件 ， 
如 图 20-34 所 示 。 


本 1 加 


np] 


laa 


A np tmpy 
ipg 


图 20-32 为 Flash 动画 添加 声音 


原始 文件 : | 原始 文件 /CH20/ 动画 .Ha 


最 终 文件 ，| 最 终 文件 /CH20/ 动画 fla 
三 打开 原始 文件 “动画 .ha”, 如 图 20-33 所 示 。 


IN WE mp3 » Wa wav ~ 


| 
图 20-34 “导入 到 库 ” 对 话 框 
03 单 击 “打开 ”按钮 ， 导 入 音乐 文件 ， 如 图 
20-35 所 示 。 
吗 在 “时 间 轴 ”面板 中 单 击 “ 新 建 图 层 ” 按 
钮 ， 在 “图 层 1” 的 上 面 新 建 “ 图 层 2”， 如 
图 20-36 所 示 。 


图 20-33 打开 原始 文件 
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图 20-35 导入 音乐 文件 图 20-36 新 建 图 层 


05 在 “ 库 ” 面 板 中 将 声音 文件 拖 入 到 文档 中 ， 如 图 20-37 所 示 。 
06 在 “属性 ”面板 中 将 “同步 ”设置 为 “循环 ”， 如 图 20-38 所 示 。 


图 20-37 拖 入 声音 文件 图 20-38 设置 循环 方式 


本 章 小 结 


本 章 介绍 了 导入 视频 和 音频 的 方法 ， 还 重点 介绍 了 声音 的 编辑 和 压缩 。 通 过 视频 和 音频 的 
导入 使 得 可 以 应 用 到 动画 中 的 资源 大 大 丰富 ， 因 此 制作 出 的 效果 也 更 加 丰富 了 。 声 音 的 编辑 与 
压缩 、 视 频 的 导入 与 编辑 都 是 动画 中 会 用 到 的 知识 点 。 在 这 些 方面 ， 希 望 读 者 能 通过 大 量 的 练 
习 以 达 到 熟练 掌握 的 目的 。 
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第 21 章 ActionScript 脚本 动画 


ActionScript 语句 是 Flash 中 提供 的 一 种 动作 脚本 语言 ， 具 备 了 强大 的 交互 功能 ， 提 高 了 动 


画 与 用 户 之 间 的 交互 性 ,并 使 得 用 户 对 动画 元 件 的 控制 得 到 加 强 。 通 过 对 其 中 相应 语句 的 调用 ， 


使 Flash 能 实现 一 些 特殊 的 功能 。ActionScript 是 Flash 强大 交互 功能 的 核心 ， 是 Flash 中 不 可 
缺少 的 重要 组 成 部 分 之 一 。 


技术 要 点 
合 ”ActionScript 编程 基础 合 常用 ActionScript 语句 
令 ”ActionScript 的 运算 符 全 Flash 中 脚本 的 添加 


ActionScript 编程 基础 


通过 使 用 ActionScript 脚本 编程 ， 可 以 实现 根据 运行 时 间 和 加 载 数据 等 事件 来 控制 Flash 
文档 播放 的 效果 ， 可 以 为 Flash 文档 添加 交互 性 ， 还 可 以 将 内 置 对 象 与 内 置 的 相关 方法 、 属 性 
和 事件 结合 使 用 ， 创 建 更 加 短小 精 悍 的 应 用 程序 ， 所 有 这 些 都 可 以 通过 可 重复 利用 的 脚本 代码 
来 完成 。 
21.1.1 ActionScript 概述 

Flash 利用 ActionScript 编程 的 目的 就 是 更 好 地 与 用 户 进行 交互 ， 通 常用 Flash 制作 页 面 
可 以 很 轻易 地 制作 出 华丽 的 Flash 特效 ， 如 残 影 、 逛 单 、 淡 入 淡出 及 动态 按钮 等 。 使 用 简单 
的 Flash 编程 可 以 实现 场景 的 跳 转 、 与 HTML 网 页 的 链接 、 动 态 装载 SWF 文件 等 。 而 高 级 的 
Flash 编程 可 以 实现 复杂 的 交互 游戏 ， 根 据 用 户 的 操作 响应 不 同 的 电影 ， 与 后 台数 据 库 及 各 种 
程序 进行 交流 ， 如 ASP、PHP、SQL Server 等 。 庞 大 的 数据 库 系统 及 各 种 程序 与 Flash 内 置 的 
编程 语句 的 结合 ， 可 以 制作 出 很 多 人 机 交互 的 网 页 、 游 戏 及 在 线 商 务 系统 。 

Flash 的 脚本 编程 语言 整合 了 很 多 新 的 语法 ， 它 看 起 来 很 像 JavaScript。 这 是 因为 Flash 的 
ActionScript 采 用 了 和 JavaScript 一 样 的 语法 标准 ， 所 以 使 编写 的 脚本 以 更 接近 和 遵守 被 用 于 其 
他 的 面向 对 象 语言 的 标准 并 支持 所 有 的 标准 ActionScript 语言 的 元 件 。 但 是 这 两 者 之 间 也 存在 
着 明显 的 区 别 。 

。 ActionScript 不 支持 浏览 器 相关 的 对 象 ， 如 Document、Anchor、Window 等 。 

。 ActionScript 不 支持 全 部 JavaScript 的 预定 义 对 象 。 

。 ActionScript 不 支持 JavaScript 的 函数 构造 。 

。 ”ActionScript 只 能 用 eval 语句 来 处 理 变量 ， 从 而 直接 得 到 变量 的 值 。 

。 在 JavaScript 中 ， 如 果 把 一 个 没有 定义 的 变量 转换 成 字符 串 类 型 ， 会 得 到 一 个 未 定义 

的 变量 ， 而 在 ActionScript 中 则 会 返回 一 个 空 字符 串 。 


自从 在 几 年 前 引入 以 来 ，ActionScript 语言 已 经 得 到 了 改进 和 发 展 。 每 一 次 发 布 Flash 新 版 
本 时 ， 都 会 在 ActionSeript 语言 中 添加 一 些 关 键 字 、 对 象 、 方 法 和 其 他 语言 元 素 ， 还 有 一 些 针 
对 Flash CS6 创作 环境 的 ActionScript 相关 改进 。 

ActionScript 3.0 是 一 种 功能 强大 的 、 面 向 对 象 的 编程 语言 , 它 意味 着 Flash Player 运行 时 
功能 发 展 中 的 重要 一 步 。 推 动 ActionScript 3.0 的 动机 是 创建 一 种 适合 快速 构建 Rich Internet 
Application 的 理想 语言 , Rich Internet Application 已 成 为 Web 体验 的 必要 组 成 部 分 。 


21.1.2 面向 对 象 的 脚本 编程 概念 

数据 类 型 描述 了 一 个 变量 或 者 元 素 能 够 存放 何 种 类 型 的 数据 信息 。ActionScript 的 数据 
类 型 分 为 基本 数据 类 型 和 引用 数据 类 型 。 

1 对象 

对 象 是 属性 的 集合 。 每 个 属性 都 有 名 称 和 值 。 属 性 的 值 可 以 是 任何 Flash 数据 类 型 ， 甚 至 
可 以 是 对 象 数 据 类 型 。 这 使 动画 工作 人 员 可 以 将 对 象 进行 “ 嵌 套 ”。 要 指定 对 象 及 其 属性 ， 可 
以 使 用 点 〈.) 运算 符 。 例 如 : 

jodan.finalExam.artScore; 

在 上 述 代 码 中 ，artScore 是 finalExam 的 属性 ， 而 finalExam 则 是 jodan 的 属性 。 

另外 ， 可 以 使 用 内 置 动作 脚本 对 象 访问 和 处 理 特定 种 类 的 信息 。 例 如 ，“Math” 对 象 具 有 
一 些 方法 ， 这 些 方法 可 以 对 传递 给 它们 的 数字 执行 数学 运算 。 例 如 : 

squareRoot = Math.sqrt (100) ; 

例如 ， 使 用 ActionScript 中 “MovieClip” 对 象 具有 的 一 些 方法 ， 来 控制 舞台 上 的 电影 剪辑 元 
件 实例 : 


mclInstanceName.stop (); 
mc2InstanceName.prevFrame (); 


除 此 之 外 ， 还 可 以 创建 自己 的 对 象 来 组 织 影片 中 的 信息 。 但 如 果 要 使 用 动作 脚本 向 影片 添 
加 交互 操作 ， 需 要 大 量 不 同 的 信息 。 创 建 对 象 时 可 以 将 信息 分 组 ， 简 化 脚本 撰写 过 程 。 

2. 电影 剪辑 

电影 前 辑 其 实 是 对 象 类 型 中 的 一 种 ， 但 在 整个 Flash 动画 中 ， 只 有 “MC” 真 正 指 向 了 场 
景 中 的 一 个 电影 剪辑 。 通 过 该 对 象 和 它 的 方法 ， 以 及 对 其 属性 的 操作 ， 就 可 以 控制 动画 的 播放 
和 “MC” 状 态 。 例 如 : 


onClipEvent (mouseDown) { 
myMC .nextFrame (); 
} 


该 语句 的 作用 就 是 当 和 鼠标 按 下 这 一 事件 发 生 时 , 电影 剪辑 元 件 的 一 个 名 为 smyMC” 的 实例 ， 
将 会 跳 到 后 一 帧 。 

3. 字符 串 

字符 串 是 由 字母 、 数 字 、 标 点 等 组 成 的 字符 序列 ， 在 ActionScript 中 应 用 字符 串 时 要 将 其 
放 在 单 引 号 或 双 引 号 中 。 例 如 ， 下 面 语句 中 的 “jodan” 就 是 一 个 字符 串 : 


myname="jodan™; 
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O 
> 多 


可 以 使 用 加 法 (+) 运算 符 连 接 或 合并 两 个 字符 串 。ActionScript 会 精确 地 保留 在 字符 串 的 
两 端 出 现 的 空格 作为 该 字符 串 的 文本 部 分 。 例 如 : 


myAge="18"™; 
mySelfShow="I'"'m"+ myAge; 


该 程序 被 执行 后 得 到 的 “mySelfShow” 的 值 就 是 “Im 18”， 但 要 注意 的 是 文本 字符 串 是 
区 分 大 小 写 的 。 例 如 : 


invoice.display = "welcome"; 
invoice.display = "WELCOME"; 


这 两 个 语句 就 会 在 指定 的 文本 字段 变量 中 放置 不 同 的 文本 。 

由 于 字符 串 以 引号 作为 开始 和 结束 的 标记 ， 所 以 要 想 在 一 个 字符 串 中 包括 一 个 单 引号 或 双 
引号 ， 需 要 在 其 前 面 加 上 一 个 反 斜 杠 字符 “\”， 称 为 “ 转 义 ”。 

4. 数字 

数据 类 型 中 的 数字 是 一 个 双 精 度 的 浮 点 型 数字 。 可 以 使 用 算术 运算 符 ， 比 如 +、-、*、 人 、% 
等 ， 来 对 数字 进行 运算 ， 也 可 以 使 用 预定 义 的 数学 对 象 来 操作 字符 。 在 Flash 中 ， 数 字 类 型 是 
很 常见 的 类 型 。 

5. 布尔 值 

布尔 值 是 true 或 false 中 的 一 个 。 在 需要 时 , ActionScript 也 可 以 将 true 和 false 转换 成 1 和 0。 
布尔 值 最 经 常 的 用 法 是 和 逻辑 操作 符 一 起 ， 用 于 进行 比较 和 控制 一 个 程序 脚本 的 流向 。 例 如 


onClipEvent (enterFrame) { 
if (userName == true && password == true) { 
gotoAndPlay02; 


} 
} 


在 上 述 语句 中 如 果 客 户 名 和 密码 都 正确 的 话 ， 那 么 将 跳 转 到 影片 的 第 2 帧 并 开始 播放 。 
21.1.3 “动作 ”面板 概述 
“动作 ”面板 是 专门 用 来 编写 ActionScript 语言 的 ， 在 学 习 ActionScript 脚本 之 前 ， 首 先 


来 熟悉 一 下 “动作 ”面板 的 界面 。 如 果 在 工作 界面 上 看 不 到 “动作 ”面板 , 可 以 执行 “窗口 ”1“ 动 
作 ” 命 令 ， 或 使 用 快捷 键 F9 快速 打开 “动作 ”面板 ， 如 图 21-1 所 示 。 


图 21-1 “动作 ”面板 


py ActionScript 的 运算 符 


在 ActionScript 中 ， 运 算 符 用 于 指定 表达 式 中 的 值 将 如 何 被 联合 、 比 较 或 者 是 改变 ， 操 作 
符 的 动作 对 象 称 为 操作 数 。 


21.2.1 ”数值 运算 符 

数值 运算 符 可 以 执行 加 法 、 减 法 、 乘 法 、 除 法 运算 ， 也 可 以 执行 其 他 算术 运算 。 增 量 运 算 
符 最 常见 的 用 法 是 it+, 可 以 在 操作 数 前 后 使 用 增 量 运 算 符 。 在 下 面 的 实例 中 “score” 首 先 递增 ， 
然后 再 与 数字 60 进行 比较 。 

if (++ score >= 60) 

若 score 在 执行 比较 之 后 递增 ， 则 

if (score ++ >= 30) 

如 表 21-1 所 示 为 动作 脚本 的 常用 数值 运算 符 。 

表 21-1 数值 运算 符 


21.2.2 ”比较 运算 符 

比较 运算 符 用 于 比较 表达 式 的 值 ， 然 后 返回 一 个 布尔 值 〈true 或 false) 。 这 些 操作 符 最 党 
用 于 判断 循环 是 否 结束 或 用 于 条 件 语句 中 。 在 下 面 的 示例 中 , 如 果 变 量 “password” 为 “831210”， 
则 载 入 影片 “mov1”， 和 否则 ， 载 入 影片 “mov2”。 


if (password == 831210) { 
loadMovieNum (" movl.swf", 3); 
} else { 
loadMovieNum (" mov2.swf", 3); 
如 表 21-2 所 示 为 动作 脚本 的 常用 比较 运算 符 。 
表 21-2 比较 运算 符 


运算 符 执行 的 运算 


大 于 


小 于 或 等 于 
大 于 或 等 于 
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21.2.3 ”逻辑 运算 符 

逻辑 运算 符 会 比较 布尔 值 (tue 和 false) ， 然 后 返回 第 3 个 布尔 值 。 例 如 ， 如 果 两 个 操作 
数 都 为 tue， 则 罗 辑 “与 ”运算 符 〈&&) 将 返回 tue。 如 果 其 中 一 个 或 两 个 操作 数 为 tue， 则 
逻辑 “或 ”运算 符 (I|) 将 返回 rue。 逻辑 运算 符 通 常 与 比较 运算 符 配合 使 用 ， 以 确定 让 动作 
的 条 件 。 如 前 面 讲 过 的 例子 : 


if (userName == jodan && password == 831210) { 
gotoAndPlay02; 


L 
如 表 21-3 所 示 为 动作 脚本 的 常用 逻辑 运算 符 。 
表 21-3 比较 运算 符 
| 从 | ijfFjpi 算 | 
逻辑 “与 ” 
逻辑 “或 


21.2.4 ”赋值 运算 符 


赋值 运算 符 主 要 用 来 将 数值 或 表达 式 的 计算 结果 赋予 变量 。 在 Flash 中 大 量 应 用 赋值 运算 
符 ， 这 样 可 以 使 设计 的 动作 脚本 更 为 简洁 。 赋 值 运算 符 如 表 21-4 所 示 。 
if (userName == jodan && password == 831210) { 


gotoaAndPlay02; 
} 


表 21-4 赋值 运算 符 
运算 符 | fi 的 过 算 | 
| 
| 
| 本 
~- 相 采 并 赋值 
求 模 并 赋值 
相 除 并 赋值 
接 位 左 移 位 并 赋值 
按 位 右 移 位 并 赋值 
右 移 位 填 零 并 赋值 
按 位 “ 异 或 ”并 赋值 
按 位 “或 ”并 赋值 
按 位 “与 ”并 赋值 


21.2.5 ”相等 运算 符 

使 用 相等 操作 符 “ 一 ”可 以 确定 两 个 操作 数 的 值 或 身份 是 否 相等 ， 这 种 比较 的 结果 是 返回 
一 个 布尔 值 (tmue 或 false) 。 如 果 操 作 数 是 字符 串 、 数 字 或 布尔 值 ， 它 们 将 通过 值 来 比较 ; 如 
果 操 作 数 是 对 象 或 数组 ， 它 们 将 通过 引用 来 比较 。 全 等 “一 ”运算 符 与 等 于 运算 符 相 似 ， 但 是 
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有 一 个 很 重要 的 差异 ， 即 全 等 运算 符 不 执行 类 型 转换 。 如 果 两 个 操作 数 属于 不 同 的 类 型 ， 全 等 
运算 符 会 返回 false， 不 全 等 “! 一 ”运算 符 会 返回 全 等 运算 符 的 相反 值 。 用 赋值 运算 符 检 查 等 
式 是 常见 的 错误 。 例 如 : 
if (myPassword == 831210) 
如 果 将 表达 式 写 为 “myPassword= 831210” 则 是 错误 的 ， 因 为 它 只 是 将 值 “831210” 赋 予 变 
量 “myPassword”， 而 不 会 比较 操作 数 。 如 表 21-5 所 示 列 出 了 动作 脚本 中 常用 的 相等 运算 符 。 
表 21-5 等 于 运算 符 


21.2.6 ”位 运算 符 
使 用 位 运算 符 会 在 内 部 将 浮 点 型 数字 转换 成 32 位 的 整 型 ， 所 有 的 位 运算 符 都 会 对 一 个 浮 
点 数 的 每 一 位 进行 计算 并 产生 一 个 新 值 。 如 表 21-6 所 示 为 常用 动作 脚本 位 运算 符 。 
表 21-6 位 运算 符 


21.2.7 ”运算 符 的 优先 级 
当 两 个 或 两 个 以 上 的 运算 符 在 同一 个 表达 式 中 被 使 用 时 ， 一 些 运算 符 与 其 他 运算 符 相 比 有 
更 高 的 优先 级 。 例 如 ，“*” 要 在 “+” 之 前 被 执行 因为 乘法 运算 比 加 法 运算 具有 更 高 的 优先 级 。 
ActionScript 就 是 严格 遵循 这 个 优先 等 级 来 决定 哪个 运算 符 首先 执行 ,哪个 运算 符 最 后 执行 的 。 
现 将 一 些 动作 脚本 运算 符 及 其 结合 律 ， 按 优先 级 从 高 到 低 排列 ， 如 表 21-7 所 示 。 
表 21-7 运算 符 的 优先 级 
| 二 符 | 说 阴 结合 律 
函数 调用 从 左 到 右 
数组 元 素 从 左 到 右 
结构 成 员 从 左 到 右 


时 

[] 

4+ 前 递增 从 右 到 左 

一 前 递减 从 右 到 左 
new 分 配对 象 从 右 到 左 
delete 取消 分 配对 象 从 右 到 左 
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续 表 


A 
a 对 象 类 型 从 右 到 左 
void 一 一 从 右 到 左 


从 左 到 右 
从 左 到 右 
从 左 到 右 


| 从 左 到 右 


常用 的 ActionScript 语句 


在 Flash 中 经 常用 到 的 语句 是 条 件 语句 和 循环 语句 。 条 件 语句 包括 让 语 句 、 特 殊 条 件 语 句 ， 
循环 语句 包括 while 循环 、for 循环 语句 。 

1. if 条 件 判 断 

条 件 语句 过 能 够 建立 一 个 执行 条 件 ， 只 有 当 让 语 句 设 置 的 条 件 成 立时 ， 才 能 继续 执行 后 
面 的 动作 。 过 条 件 语句 主要 应 用 于 一 些 需 要 对 条 件 进行 判定 的 场合 ， 其 作用 是 当 寺中 的 条 件 成 
立时 执行 这 和 else 让 之 间 的 语句 。 

最 简单 的 条 件 语句 如 下 : 

if (条 件 a) { 


a 


} 

当 满 足 计 括号 内 的 条 件 a 时 ， 执 行 大 括号 内 的 语句 a。 
一 般 ，else 都 与 ff 一 起 使 用 表示 较为 复杂 的 条 件 判断 : 
| 

语句 a 

}elsef{ 

语句 b 

} 

当 满 足 让 括号 内 的 条 件 a 时 ， 执 行 大 括号 的 语句 a， 否则 执行 语句 b。 
以 下 是 括号 “else if” 的 条 件 判断 的 完整 语句 : 

If( 条件 a) { 

语句 


和 if (条 件 b) { 

语句 b 

} elsef 

语句 c 

} 

当 满 足 直 括号 内 的 条 件 a 时 ， 执 行 大 插 号 的 语句 a; 否则 判断 是 否 满足 条 件 b， 如 果 满 足 
条 件 b， 就 执行 大 括号 里 的 语句 b; 如 果 都 不 满足 ， 就 执行 语句 c。 

2. 特殊 条 件 判 断 

特殊 条 件 判断 语句 一 般 用 于 赋值 ， 本 质 是 一 种 计算 形式 ， 格 式 为 : 

变量 a= 判断 条 件 ? 表达 式 1: 表达 式 2; 

如 果 判 断 条 件 成 立 ，a 就 取 表达 式 1 的 值 ， 如 果 不 成 立 ， 就 取 表达 式 2 的 值 。 
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例如 : 


Var a: Number=1 
Var b: Number=2 
Var max: Number=a>ba: b 


执行 以 后 ，max 就 为 a 和 b 中 较 大 的 值 ， 即 值 为 2。 

3. for 循环 

通过 for 语句 创建 的 循环 ， 可 在 其 中 预先 定义 好 决定 循环 次 数 的 变量 。 
for 语句 创建 循环 的 语法 格式 如 下 : 

for ( 初始 化 条 件 改变 变量 ) { 

语句 


} 
在 “初始 化 ”中 定义 循环 变量 的 “初始 值 ”，“ 条 件 ” 是 确定 什么 时 候 退 出 循环 ，“ 改 变 
变量 ”是 指 循环 变量 每 次 改变 的 值 。 例 如 : 


trace=0 
for (Var i=1 i<=30 i++ { 
trace = trace +i 


} 

以 上 实例 中 ， 初 始 化 循环 变量 i 为 1， 每 循环 一 次 ，i 就 加 1， 并且 执行 一 次 “trace = trace 
+i”， 直 到 i 等 于 30， 停 止 增 加 trace。 

4. while 和 do while 循环 

while 语句 可 以 重复 执行 某 条 语句 或 某 段 程序 。 使 用 while 语句 时 ， 系 统 会 先 计 算 一 个 表 
达 式 ， 如 果 表 达 式 的 值 为 true， 就 执行 循环 的 代码 。 在 执行 完 循环 的 每 一 个 语句 之 后 ，while 
语句 会 再 次 对 该 表达 式 进 行 计算 。 当 表达 式 的 值 仍 为 tue 时 ， 会 再 次 执行 循环 体 中 的 语句 ， 直 
到 表达 式 的 值 为 false。 

do while 语句 与 while 语句 一 样 可 以 创建 相同 的 循环 。 这 里 要 注意 的 是 ，do while 语句 对 
表达 式 的 判定 是 在 其 循环 结束 处 ， 因 而 使 用 do while 语句 至 少 会 执行 一 次 循环 。 

for 语句 的 特点 是 有 确定 的 循环 次 数 ， 而 while 和 do while 语句 没有 确定 的 循环 次 数 ， 具 体 
使 用 格式 如 下 : 

while (条 件 ) { 

语句 


} 
以 上 代码 只 要 满足 “条 件 ”， 就 一 直 执 行 “语句 ”的 内 容 。 


dof 
语句 
}while (条 件 ) 


本 章 小 结 
由 于 脚本 语言 是 一 门 系统 的 语言 , 在 这 么 短 的 篇 幅 内 不 可 能 详细 地 为 大 家 讲解 每 一 条 命令 、 
每 一 个 语法 , 我 们 只 是 介绍 了 一 些 脚 本 编程 的 基本 术语 和 常用 的 语法 知识 及 语句 。 像 外 语 一 样 ， 


要 掌握 一 门 计算 机 语言 也 是 一 个 长 期 而 辛苦 的 过 程 。 但 是 要 制作 出 高 级 的 动画 效果 ， 脚 本 知识 
是 一 个 动画 制作 者 必须 要 掌握 的 。 
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第 22 章 使 用 HTML 语言 编写 网 页 


HIML 是 制作 网 页 的 基础 , 我 们 在 网 络 中 讲 的 静态 网 页 , 就 是 以 HTML 为 基础 制作 的 网 页 ， 
早期 的 网 页 都 是 直接 用 HTML 代码 编写 的 ， 不 过 现在 有 很 多 智能 化 的 网 页 制作 软件 ， 通 常 不 
需要 人 工 去 写 代 码 ， 而 是 由 这 些 软件 自动 生成 。 尽 管 不 需要 自己 写 代 码 ， 但 了 解 HTML 代码 
仍然 非常 重要 ， 是 学 习 网 页 制作 技术 的 基础 知识 。 


技术 要 点 
急 认识 HTML 语言 全 ”图片 和 列表 
令 HTML 文档 头 标记 全 表格 和 框架 
令 ”基本 的 HTML 标签 令 表单 
令 ”文字 和 超 链接 


认识 HTML 语言 


超 文本 标记 语言 (Hyper Text Markup Language，HTML) 又 称 超 文本 标签 语言 ， 是 Internet 
上 用 于 编写 网 页 的 主要 语言 ， 它 提供 了 精简 而 有 力 的 文件 定义 ， 可 以 设计 出 多 姿 多 彩 的 超 媒体 
文件 ， 通 过 HTTP 通信 协议 ， 使 得 HTML 文件 可 以 在 全 球 互 联网 (World Wide Web) 上 进行 
跨 平台 的 文件 交换 。 

22.1.1 HTML 是 什么 
上 网 冲浪 《〈 即 浏览 网 页 ) 时 ， 呈 现在 人 们 面前 的 一 个 个 漂亮 的 页 面 就 是 网 页 ， 是 网 络 内 容 

的 视觉 呈现 。 网 页 是 怎样 制作 的 呢 ? 其 实 网 页 的 主体 是 一 个 用 HIML 代码 创建 的 文本 文件 ， 

使 用 HIML 中 的 相应 标签 ， 就 可 以 将 文本 、 图 像 、 动 画 及 音乐 等 内 容 包含 在 网 页 中 ， 再 通过 

浏览 器 的 解析 ， 多 姿 多 彩 的 网 页 内 容 就 呈现 出 来 了 。 

1. HTML 的 特点 

HTML 文档 制作 简单 ， 且 功能 强大 ， 支 持 不 同 数据 格式 的 文件 导入 ， 这 也 是 WWW 盛行 
的 原因 之 一 ， 其 主要 特点 如 下 : 

。 HTML 文档 容易 创建 ， 只 需 一 个 文本 编辑 器 就 可 以 完成 。 

。 HTML 文件 存储 量 小 ， 能 够 尽 可 能 快 地 在 网 络 环境 下 传输 与 显示 。 

。 具有 平台 无 关 性 .HTML 独立 于 操作 系统 平台 , 它 能 对 多 平台 兼容 , 只 需要 一 个 浏览 器 ， 
就 能 够 在 操作 系统 中 浏览 网 页 文件 。 可 以 使 用 在 广泛 的 平台 上 ， 这 也 是 WWW 盛行 的 
另 一 个 原因 。 

。 容易 学 习 ， 不 需要 很 深 的 编程 知识 。 

。 具有 可 扩展 性 ，HTML 语言 的 广泛 应 用 带 来 了 加 强 功 能 ， 增 加 了 标识 符 等 要 求 ， 
HTML 采取 子 类 元 素 的 方式 ， 为 系统 扩展 带 来 了 保证 。 
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2. HTML 的 历史 

HTML 1.0 一 一 1993 年 6 月 ， 互 联网 工程 工作 小 组 〈IETF) 工作 草案 发 布 。 
HTML 2.0 一 一 1995 年 11 月 发 布 。 

HTML 3.2 一 一 1996 年 1 月 W3C 推荐 标准 。 

HTML 4.0 一 一 1997 年 12 月 W3C 推荐 标准 。 

HTML 4.01 一 一 1999 年 12 月 W3C 推荐 标准 。 

HTML 5.0 一 一 2008 年 8 月 W3C 工作 草案 。 


22.1.2 ”HTML 标签 、 元 素 和 属性 


HTML 的 任何 标签 都 由 “<” 和 “>” 围 起 来 , 如 <HTML>。 在 起 始 标 签 的 标签 名 前 加 上 符号 “/” 
便 是 其 终止 标签 ， 如 </HTML>， 夹 在 起 始 标 签 和 终止 标签 之 间 的 内 容 受 标签 的 控制 。 超 文本 
文档 分 为 头 和 主体 两 部 分 ， 在 文档 头 部 ， 对 文档 进行 了 一 些 必要 的 定义 ， 文 档 主体 是 要 显示 的 
各 种 文档 信息 。 

基本 语法 : 

<html> 

<head> 网 页 头 部 信息 </head> 


<body> 网 页 主体 正文 部 分 </body> 
</html> 


语法 说 明 : 

其 中 <html> 在 最 外 层 ， 表 示 这 对 标签 间 的 内 容 是 HTML 文档 ， 一 个 HIML 文档 总 是 以 
<html> 开始 ， 以 </html> 结束 。<head> 之 间 包 括 文档 的 头 部 信息 ， 如 文档 标题 等 ， 若 不 需要 
头 部 信息 则 可 省 略 此 标签 。<body> 标签 一 般 不 能 省 略 ， 表 示 正 文 内 容 的 开始 。 

下 面 就 以 一 个 简单 的 HTML 文件 来 熟悉 HTML 文件 的 结构 。 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>HTML 标签 、 元 素 和 属性 </title> 

</head> 

<body><p>22 .1.2 HTML 标签 、 元 素 和 属性 </p></body> 
</html> 


这 一 段 代码 是 使 用 HTML 中 最 基本 的 几 个 标签 所 组 成 的 , 运行 代码 , 在 浏览 器 中 预览 效果 ， 
如 图 22-1 所 示 。 


A RS SE a TAT RR 
2212HTML 祭 等 、 元 对 和 局 性 


图 22-1 HTML 文件 结构 
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22.1.3 HTML 文件 组 成 

HTML 文件 均 以 <html> 标记 开始 , 以 </html> 标记 结束 。<head>...</head> 标记 之 间 的 内 容 。 
用 于 描述 页 面 的 头 部 信息 ， 如 页 面 的 标题 、 作 者 、 摘 要 、 关 键 词 、 版 权 、 自 动 刷新 等 信息 。 在 
<body>.…</body> 标记 之 间 的 内 容 即 为 页 面 的 主体 内 容 。 

1. 页 面 标题 标记 <title> 

<title> 标记 用 于 定义 页 面 的 标题 ， 是 成 对 标记 ,位 于 <head> 标记 之 间 。 

标题 的 语句 为 : <title> 此 处 显示 标题 <title> 

2. 辅助 标记 <meta> 

<meta> 标记 用 于 定义 页 面 的 相关 信息 ， 为 非 成 对 标记 ， 位 于 <head> 标记 之 间 。 使 用 
<meta> 标记 可 以 描述 页 面 的 作者 、 摘 要 、 关 键 词 、 版 权 、 自 动 刷新 等 页 面 信息 。 

<meta> 标记 的 语句 格式 如 下 : 


<meta charset="utf-8"> 


3. 正文 标记 <body> 

<body> 标记 用 于 定义 正文 内 容 的 开始 ，</body> 用 于 定义 正文 内 容 的 结束 ， 在 <body>.… 
</body> 之 间 的 内 容 即 为 页 面 的 主体 内 容 ， 使 用 <body> 标记 的 各 种 属性 可 以 定义 页 面 主体 内 
容 的 不 同 表 达 效 果 ，<body> 标记 的 主要 属性 如 下 : 

bgcolor: 定义 网 页 的 背景 色 。 

background: 定义 网 页 背景 图 像 。 


HTML 文档 头 部 标签 


HTML 中 的 head 标记 是 网 页 标记 中 一 个 非常 重要 的 符号 。 做 好 head 标记 中 的 内 容 对 整个 
页 面 有 着 非常 重要 的 意义 ， 下 面 介绍 一 下 head 标记 中 比较 常用 的 一 些 东 西 。 


22.2.1 文档 类 型 声明 

HTML 也 有 多 个 不 同 的 版 本 ， 只 有 完全 明白 页 面 中 使 用 的 确切 的 HTML 版 本 ， 浏 览 器 才 
能 完全 正确 地 显示 出 HTML 页 面 。 这 就 是 <!ldoctype> 的 用 处 。 

<! doctype> 不 是 HTML 标签 。 它 为 浏览 器 提供 一 项 信息 (声明 ) ， 即 HTML 是 用 什么 版 
本 编写 的 。 

实例 代码 : 

<!ldoctype html> 

<Idoctype> 声明 位 于 文档 中 的 最 前 面 的 位 置 ， 处 于 <html> 标签 之 前 。 此 标签 可 告知 浏览 
器 文档 使 用 哪 种 HTML 或 XHTML 规范 。 


22.2.2 文档 头 部 标签 


在 HTML 语言 的 头 部 元 素 中 ， 一 般 需要 包括 标题 、 基 础 信息 和 元 信息 等 。HTML 的 头 部 
元 素 是 以 <head> 为 开始 标记 ， 以 </head> 为 结束 标记 。 
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基本 语法 : 

<head>...</head> 

语法 说 明 : 

定义 在 HTML 语言 头 部 的 内 容 都 不 会 在 网 页 上 直接 显示 ， 而 是 通过 另外 的 方式 起 作用 。 
实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

</body> 

</html> 


22.2.3 ”文档 描述 

<meta> 标记 的 功能 主要 是 定义 页 面 中 的 信息 ， 这 些 信 息 并 不 会 显示 在 浏览 器 中 ， 而 只 在 
源 代 码 中 显示 。<meta> 标记 通过 属性 定义 文件 信息 的 名 称 、 内 容 等 。<meta> 标记 能 够 提供 文 
档 的 关键 字 、 作 者 及 描述 等 多 种 信息 ， 在 HTML 头 部 可 以 包括 任意 数量 的 <meta> 标记 。 

描述 标签 是 description， 网 页 的 描述 标签 为 搜索 引擎 提供 了 关于 这 个 网 页 的 总 括 性 描述 。 
网 页 的 描述 元 标签 是 由 一 两 个 语句 或 段落 组 成 的 ， 内 容 一 定 要 相关 ， 描 述 不 能 太 短 、 太 长 或 过 
分 重复 。 

基本 语法 : 

<meta name="description" content=" 设置 页 面 描述 "> 

语法 说 明 : 

在 该 语法 中 ，name 为 属性 名 称 ， 这 里 设置 为 description， 也 就 是 将 元 信息 属性 设置 为 页 面 
说 明 ， 在 content 中 定义 具体 的 描述 语言 。 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="description" content=" 网 页 设计 网 站 建设 网 站 优化 "> 
<title> </title> 

</head> 

<body> 

</body> 

</html> 


22.2.4 ”网 页 标题 

不 管 是 用 户 还 是 搜索 引擎 ， 对 一 个 网 站 最 直观 的 印象 往往 来 自 于 这 个 网 站 的 标题 。 用 户 通 
过 搜索 自己 感 兴趣 的 关键 字 ， 来 到 搜索 结果 页 面 ， 决 定 他 是 否 单 击 的 关键 字 往 往 在 于 网 站 的 标 
题 。 在 网 页 中 设置 网 页 的 标题 ， 只 要 在 HIML 文件 的 头 部 文件 的 <title></title> 中 输入 标题 信 
息 就 可 以 在 浏览 器 上 显示 。 标 题 标记 以 <title> 开始 ， 以 </title> 结束 。 

基本 语法 : 
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<head> 
<Edtie> er tle> 
...</head> 
语法 说 明 : 


页 面 的 标题 只 有 一 个 ， 它 位 于 HTML 文档 的 头 部 ， 即 <head> 和 </head> 之 间 。 
实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 网 页 的 标题 </title> 
</head> 

<body> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 “<title> 广 源 时 代 科 技 公 司 </title>” 设 置 网 页 的 标题 ， 在 浏 
览 器 中 预览 时 ， 可 以 在 浏览 器 标题 栏 看 到 网 页 标题 ， 如 图 22-2 所 示 。 


ee owe sane 0- ox Sree | ~ 
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图 22-2 页 面 标题 


基本 的 HTML 标签 


在 <body> 和 </body> 中 放置 的 是 页 面 中 所 有 的 内 容 ， 如 图 片 、 文 字 、 表 格 、 表 单 、 超 链 
接 等 。<body> 标记 有 自己 的 属性 ， 包 括 网 页 的 背景 设置 、 文 字 属性 设置 和 超 链 接 设置 等 。 设 
置 <body> 标记 内 的 属性 ， 可 控制 整个 页 面 的 显示 方式 。 


22.3.1 主体 标签 


HTML 的 主体 标记 是 <body>， 在 <body> 和 </body> 中 放置 的 是 网 页 中 的 所 有 内 容 ， 如 文 
字 、 图 片 、 超 链接 、 表 格 、 表 单 等 。 

在 HIML 中 ， 标 签 可 以 拥有 属性 。 属 性 能 够 为 页 面 上 的 HTML 元 素 提供 附加 信息 。 标 签 
<body> 定义 了 html 页 面 的 主体 元 素 。 使 用 一 个 附加 的 bgcolor 属性 ， 可 以 告诉 浏览 器 : 页 面 
的 背景 色 是 红色 的 ， 即 <body bgcolor="red">。 

<body> 元 素 有 很 多 自身 的 属性 ， 如 定义 页 面 文字 的 颜色 、 背 景 的 颜色 、 背 景 图 像 等 ， 如 
表 22-1 所 示 。 
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表 22-1 body 标记 属性 


属性 描述 
text 设 定 页 面 文字 的 颜色 
bgcolor 设 定 页 面 背 景 的 颜色 
background 设 定 页 面 的 背景 图 像 
bgproperties 设 定 页 面 的 背景 图 像 为 固定 ， 不 随 页 面 的 滚动 而 滚动 
link 设 定 页 面 默认 的 链接 颜色 
alink 设 定 鼠 标 正 在 单 击 时 的 链接 颜色 
Vlink 设 定 访问 过 后 的 链接 颜色 
topmargin 设 定 页 面 的 上 边 距 
leftmargin 设 定 页 面 的 左边 距 


22.3.2 ”设置 页 面 边 距 


有 的 朋友 在 做 页 面 的 时 候 ， 感 觉 文 字 或 者 表格 怎么 也 不 能 靠 在 浏览 器 的 最 上 边 和 最 左边 ， 


这 是 怎么 回 事 呢 ? 因为 一 般 用 的 制作 软件 或 HTML 语言 默认 的 都 是 topmargin、leftmargin 值 等 


于 12， 如 果 把 它们 的 值 设 为 0， 就 会 看 到 网 页 的 元 素 与 左边 距离 为 0 了 。 


基本 语法 : 


<body topmargin=value leftmargin=value rightmargin=value bottomnargin=value> 


语法 说 明 : 
通过 设置 topmargin、leftmargin、rightmargin、bottomnargin 不 同 的 属性 值 来 设置 显示 内 容 


与 浏览 器 的 距离 。 在 默认 情况 下 ， 边 距 的 值 以 像素 为 单位 。 


。 topmargin 设置 到 顶端 的 距离 。 

。 ”leftmargin 设置 到 左边 的 距离 。 

。 rightmargin 设置 到 右边 的 距离 。 
。 bottommargin 设置 到 底 边 的 距离 。 
实例 代码 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 设置 边 距 </title> 

</head> 

<body topmargin="80" leftmargin="80"> 

<p> 设置 页 面 的 上 边 距 </p> 

<p> 设置 页 面 的 左边 距 </p> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 是 设置 上 边 距 和 左边 距 ， 在 浏览 器 中 预览 时 ， 可 以 看 出 定义 


的 边 距 效果 ， 如 图 22-3 所 示 。 
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设置 页 面 的 上 边 距 
设置 页 面 的 左边 距 


图 22-3 设置 的 边 距 效 果 


22.3.3 ”标题 标签 


HTML 文档 中 包含 有 各 种 级 别 的 标题 , 各 种 级 别 的 标题 由 <hl> 到 <h6> 元 素来 定义 。 其 中 ， 
<hl> 代表 最 高 级 别 的 标题 ， 依 次 递减 ，<h6> 级 别 最 低 。 

基本 语法 : 

<h1l>...</hl> 

<h2>. . .</h2> 

<az </h3> 

<h4>. . .</h4> 


<h5>.. :</h5> 
<h6>...</h6> 


语法 说 明 : 
在 该 语法 中 ，1 级 标题 使 用 最 大 的 字号 表示 ，6 级 标题 使 用 最 小 的 字号 表示 。 
实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 多 种 标题 样式 的 使 用 </title> 
</head> 

<body> 

<h1>1 级 标题 </h1> 

<h2>2 级 标题 </h2> 

<h3>3 级 标题 </h3> 

<h4>4 级 标题 </h4> 

<h5>5 级 标题 </h5> 

<h6>6 级 标题 </h6> 
</body> 

</html> 


在 代码 中 加 粗 的 代码 标记 用 于 设置 6 种 级 别 不 同 的 标题 ， 在 浏览 器 中 浏览 的 效果 如 图 22-4 
所 示 。 
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图 22-4 设置 标题 标记 


22.3.4 ”换行 标签 


在 HTML 文本 显示 中 ， 默 认 是 将 一 行文 字 连 续 地 显示 出 来 ， 如 果 想 将 把 一 个 句子 后 面 的 
内 容 在 下 一 行 显示 就 会 用 到 换行 符 <br>。 换 行 符号 标签 是 个 单 标签 ， 也 叫 空 标签 ， 不 包含 任 
何 内 容 ， 在 HTML 文件 中 的 任何 位 置 ， 只 要 使 用 了 <br> 标签 ， 当 文件 显示 在 浏览 器 中 时 ， 该 
标签 之 后 的 内 容 将 在 下 一 行 显示 。 

基本 语法 : 

<br> 

语法 说 明 ; 

一 个 <br> 标记 代表 一 个 换行 ， 连 续 的 多 个 标记 可 以 实现 多 次 换行 。 

实例 代码 : 


<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

公司 的 宗 由 :以 信 为 本 , 以 质 求生 <br> 公司 的 目标 : 开拓 市 场 , 争 创 一 流 <br> 公司 的 精神 : 敬业 公司 ， 
奋力 拼搏 <br> 公司 的 文化 ， 团 结 奋进 ， 共 创 未 来 <br> 公司 的 作风 : 尽忠 职守 ， 赤 诚 奉献 <br> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 <br> 为 设置 换行 标记 ， 在 浏览 器 中 预览 ， 可 以 看 到 换行 的 
效果 ， 如 图 22-5 所 示 。 


图 22-5 换行 效果 
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22.3.5 ”段落 标签 

HTML 标签 中 最 常用 、 最 简单 的 标签 是 段落 标签 ， 也 就 是 <p></p>， 说 它 常用 ， 是 因为 几 
乎 所 有 的 文档 文件 都 会 用 到 这 个 标签 ， 说 它 简 单 从 外 形 上 就 可 以 看 出 来 ， 它 只 有 一 个 字母 。 昌 
然 简单 ， 但 是 却 也 非常 重要 ， 因 为 这 是 一 个 用 来 区 别 段落 的 。 

基本 语法 : 

<p> 段落 文字 <p> 

语法 说 明 : 

段落 标记 可 以 没有 结束 标记 </p>， 而 每 一 个 新 的 段落 标记 开始 的 同时 也 意味 着 上 一 个 段落 
的 结束 。 

实例 代码 : 

<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<p> 公司 拥有 一 支 有 实际 经 验 丰富 的 安装 和 移 机 队伍 ， 统一 管理 、 统 一 培训 、 统 一 着 装 、 执 证 上 岗 、 技 
术 力 量 雄 厚 ， 人 员 素 质 高 、 服 务 质量 好 。 我 们 熟悉 各 种 空调 设备 的 性 能 、 维 护 与 管理 ， 具 有 优良 的 专业 技能 和 
服务 常识 ， 并 且 接 受 专业 课程 培训 ， 确 保 各 项 服务 质量 ， 在 各 地 区 县 都 有 网 点 ， 无 节假日 ，24 小 时 服务 。</ 
p><p> 时 刻 提供 优质 的 空调 维修 、 空 调 保养 、 空 调 加 氟 、 空 调 清洗 服务 。 欢 迎 政府 机 关 、 学 校 部 队 、 公 司 企 事 
业 单 位 及 个 人 有 相关 需求 来 电 咨询 。</p> 

</body> 

</html> 

在 代码 中 加 粗 部 分 的 代码 标记 <p> 为 段落 标记 ，<p> 和 </p> 之 间 的 文本 是 一 个 段落 ， 效 
果 如 图 22-6 所 示 。 


图 22-6 段落 效果 


22.3.6 ”水 平分 割 线 标签 
水 平 线 标记 用 于 在 页 面 中 插入 一 条 水 平 标尺 线 ， 使 页 面 看 起 来 整齐 明了 。 
基本 语法 : 
<hr> 
语法 说 明 : 
在 网 页 中 输入 一 个 <hr> 标记 ， 就 添加 了 一 条 默认 样式 的 水 平 线 。 


实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 水 平分 割 线 标签 </title> 
</head> 

<body> 

<p> 企业 简介 <br> 

<hr> 

</p> 

<p> 公司 于 广东 汕头 市 峡 山 莲塘 工业 区 ， 成 立 于 2002 年 ， 通 过 自主 研发 体系 ， 秉 承 绿色 环保 理念， 开展 


持续 创新 运动 , 近 十 年 来 一 直 保持 高 速 增长 产品 涉及 充电 手电 简 , 非 充 电 手 电 简 , 手提 式 探照灯 ， 应 急 照明 灯 ， 
台灯 ， 头 灯 等 系列 。 特 别 是 手电 简 ， 探 照 灯 ， 应 急 灯 等 ， 产 销 两 旺 受 客户 及 用 户 广泛 好 评 。</p> 


</body> 
</html> 


在 代码 中 加 粗 部 分 的 标记 为 水 平 线 标记 ， 在 浏览 器 中 预览 ， 可 以 看 到 插入 的 水 平 线 效果 ， 


如 图 22-7 所 示 。 


图 22-7 插入 水 平 线 效果 


文字 和 超 链接 


文字 不 仅 是 网 页 信息 传达 的 一 种 常用 方式 ， 也 是 视觉 传达 最 直接 的 方式 ， 运 用 经 过 精心 处 


理 的 文字 材料 完全 可 以 制作 出 效果 很 好 的 版 面 。 
22.4.1 文本 格式 化 标签 


HTML 可 定义 很 多 格式 化 输出 的 元 素 ， 比 如 : 粗 体 字 、 和 斜体 字 、 文 本 方向 等 。<b> 和 


<strong> 是 HTML 中 格式 化 粗 体 文本 的 最 基本 元 素 。 在 <b> 和 </b> 之 间 的 文字 或 在 <strong> 
和 </strong> 之 间 的 文字 ， 在 浏览 器 中 都 会 以 粗 体 字体 显示 。 该 元 素 的 首尾 部 分 都 是 必需 的 ， 
如 果 没有 结尾 标记 ， 则 浏览 器 会 认为 从 <b> 开始 的 所 有 文字 都 是 粗 体 。 


基本 语法 : 

<b> 加 粗 的 文字 </b> 

<strong> 加 粗 的 文字 </strong> 

语法 说 明 : 

在 该 语法 中 ， 粗 体 的 效果 可 以 通过 <b> 标记 来 实现 ， 还 可 以 通过 <strong> 标记 来 实现 。 


<b> 和 <strong> 是 行内 元 素 ， 它 可 以 插入 到 一 段 文本 的 任何 位 置 。 
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<i>、<em> 和 <cite> 是 HTML 中 格式 化 斜体 文本 的 最 基本 元 素 。 在 <i> 和 </ 之 间 的 文字 、 
在 <em> 和 </em> 之 间 的 文字 或 在 <cite> 和 </cite> 之 间 的 文字 ， 在 浏览 器 中 都 会 以 斜体 字体 
显示 。 

基本 语法 : 

<i> 斜体 文字 </i> 


<em> 斜体 文字 </em> 
<cite> 斜体 文字 </cite> 


语法 说 明 : 

斜体 的 效果 可 以 通过 <i> 标记 、<em> 标记 和 <cite> 标记 来 实现 。 一 般 在 一 篇 以 正体 显示 
的 文字 中 用 斜体 文字 起 到 醒目 、 强 调 或 者 区 别 的 作用 。 

<u> 标记 的 使 用 和 粗 体 及 斜体 标记 类 似 ， 它 作用 于 需 加 下 划 线 的 文字 。 

基本 语法 : 

<u> 下 划 线 的 内 容 </u> 

语法 说 明 : 

该 语法 与 粗 体 和 和 斜体 的 语法 基本 相同 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 设置 粗 体 、 和 斜体、 下 划 线 </title> 
</head> 

<body> 

<p><strong> 一 、 设 置 文 本 粗 体 效果 </strong></p> 
<p><em> 二 、 设 置 文本 斜体 效果 </em></p> 
<p><u> 三 、 设 置 文本 下 划 线 效果 </u></p> 
</body> 

</html> 


在 代码 中 加 粗 部 分 的 标记 <strong> 为 设置 文字 的 加 粗 、<em> 为 设置 斜体 、<u> 为 设置 下 
划 线 的 效果 ， 在 浏览 器 中 预览 效果 ， 如 图 22-8 所 示 。 


村 一 于 


图 22-8 文字 加 粗 、 斜 体 、 下 划 线 效果 


22.4.2 文本 引用 与 缩 进 
text-indent 是 指定 义 文本 首 行 的 缩 进 〈 在 首 行文 字 之 前 插入 指定 的 长 度 ) 。 


285 


网 页 设计 与 网 站 建设 完全 实战 手册 


取 值 : <length> | <percentage> | inherit 
<length>: 长 度 表 示 法 。 

<percentage>: 百分比 表示 法 。 

inherit: 继承 。 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<style type="text/css"> 
p {text-indent: lcm} 
</style> 

</head> 

<body> 


<p> 

秋 的 夜晚 ， 沙 凉 ， 远 方 ， 有 若隐若现 的 灯火 ， 迷 离 了 尘世 的 梦 ， 也 迷离 了 我 的 梦 。 也 许 ， 你 不 会 知道 ， 我 
曾 跟 浪花 默默 诉说 过 什么 ， 也 许 ， 你 不 会 知道 我 曾 跟 雪花 悄悄 私语 过 什么 ， 也 许 ， 你 不 会 知道 我 曾 跟 飞 花 轻 轻 
耳语 过 什么 。 听 风 敲 击 万 物 的 旋律 ， 那 是 我 说 爱 你 的 声音 。 如 果 你 能 懂 我 沉默 ， 你 就 能 解 我 心 语 。 

</p> 

人 

</html> 


在 代码 中 加 粗 部 分 的 标记 text-indent: lcm 为 设置 文字 的 缩 进 lem， 在 浏览 器 中 预览 效果 ， 
如 图 22-9 所 示 。 


了 二 主 的 梦 ， 也 壕 六 了 拒 的 
tb 
有 


图 22-9 文本 缩 进 


22.4.3 ”字体 的 设置 


Face 属性 规定 的 是 字体 的 名 称 ， 如 中 文字 体 的 “宋体 ”、“ 楷 体 ”、“ 素 书 ” 等 。 可 以 通 
过 字体 的 face 属性 设置 不 同 的 字体 ， 设 置 的 字体 效果 必须 在 浏览 器 中 安装 相应 的 字体 后 才 可 
以 正确 浏览 ， 否 则 有 些 特殊 字体 会 被 浏览 器 中 的 普通 字体 所 代替 。 

基本 语法 : 

<font face=" 字体 样式 ">...</font> 

语法 说 明 : 

face 属性 用 于 定义 该 段 文 本 所 采用 的 字体 名 称 。 如 果 浏 览 器 能 够 在 当前 系统 中 找到 该 字体 ， 
则 使 用 该 字体 显示 。 

实例 代码 : 


286 


<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 设置 字体 </title> 

</head> 

<body> 

<p style="font-family: ' 方正 舒 体 '"> 陌 上 花 开 ， 掩映 着 伊人 浅 浅 的 笑 帮 </p> 

<p style="font-family: ' 幼 圆 '"> 蒙 绕 了 一 段 侍 缘 ， 蝶 花 相 恋 ， 红 尘 一 醉 。</P> 

<p style="font-family: ' 华文 新 魏 '"> 生 ， 种 一 枚 相思 的 红豆 ， 许 一 世 和 柔情 ， 爱 到 永恒 。 回 眸 处 ， 
我 的 思念 ， 你 的 爱 一 直 都 在 。</p> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 是 设置 文字 的 字体 ， 在 浏览 器 中 预览 可 以 看 到 不 同 的 字体 效 
果 ， 如 图 22-10 所 示 。 


rm 
| nen P- ox |S uaz 一 
[Es 0 RD a Ta 


关上 大 并 ， 淹 现 押 人 沿江 的 着 
东 汪 了 一 各 上 络 ， 如 花季 疙 ， 并 汪 一 区 i 
入 ， 和 一 款 可 加 粒 直 吾 ， 计 一些 末 阐 ， 委 到 林寺 。 四 基 交 ， 帮 的 天 入， 你 交 室 一 夏 者 在， 


图 22-10 不 同 的 字体 效果 


22.4.4 字体 颜色 设置 

在 HTML 页 面 中 , 还 可 以 通过 不 同 的 颜色 表现 不 同 的 文字 效果 , 从 而 增加 网 页 的 亮丽 色彩 ， 
吸引 浏览 者 的 注意 。 

基本 语法 : 

<font color=" 字体 颜色 ">. . .</font> 

语法 说 明 : 

它 可 以 用 浏览 器 承认 的 颜色 名 称 和 十 六 进 制 数值 表示 。 

实例 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 

<title> 设置 文字 颜色 </title> 

</head> 

<body> 

<p><font color="#FF0000"> 质量 是 企业 的 生命 ， 客 户 满意 是 我 们 的 宗 由 ，</font></p> 
<p><font color="#3333CC"> 无 论 今 天 或 未 来 ， 公 司 将 不 遗 余力 ，</font></p> 
<p><font color="#03F030"> 营造 更 好 的 产品 ， 提 供 一 流 的 服务 。</font></p> 
</body> 

</html> 
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在 代码 中 加 粗 部 分 的 标记 是 设置 字体 的 颜色 ， 在 浏览 器 中 预览 ， 可 以 看 出 设置 字体 颜色 的 
效果 ， 如 图 22-11 所 示 。 


ee rr EEC 

0 SH EE CE TEM we 
<p><font =”#FF0000”> 懂得 ， 是 生命 中 最 美的 缘 </font></p> 
<p><font 3333CC”> 牵 了 手 ， 就 不 要 随便 分 手 </font></p> 
<p><font color=” #03F030”> 静 静 地 ， 行 走 在 时 光 深 处 </font></p> 


B 


图 22-11 设置 字体 颜色 效果 


22.4.5 ” 超 链接 标签 

超 链接 标记 <a> 在 HTML 中 既 可 以 作为 一 个 跳 转 至 其 他 页 面 的 链接 ， 也 可 以 作为 “埋设 ” 
在 文档 中 某 处 的 一 个 “ 错 定位”。<a> 也 是 一 个 行内 元 素 ， 它 可 以 成 对 出 现在 一 段 文档 的 任何 
位 置 。 

基本 语法 : 


<a 属性 =" 链接 目标 "> 链接 显示 文本 </a> 
语法 说 明 : 
在 该 语法 中 ，<a> 标记 的 属性 值 如 表 22-2 所 示 。 
表 22-2 <a> 标记 的 属性 值 


给 链接 命名 
title 给 链接 添加 提示 文字 
target 指定 链接 的 目标 窗口 
实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 超 链接 标记 </title> 

</head> 

<body> 

<p><a href="1"> 中 国 最 有 意境 的 33 句 </a></p> 

<p><a href="2"> 触动 心弦 的 句子 </a><br> 

<a href="3">2013 年 最 牛 逼 个 性 签名 </a><br> 

<a href="index2.html"> 有 多 少 情侣 败 给 了 距离 ? </a><br> 
<a href="5"> 爆笑 幽默 来 袭 ， 让 你 在 计算 机 前 狂笑 </a><br> 
<a href="6"> 致 逝去 的 青春 </a></p> 

</body> 
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</html> 
在 代码 中 加 粗 部 分 的 代码 标记 为 设置 文档 中 的 超 链接 , 在 浏览 器 中 预览 可 以 看 到 链接 效果 ， 
如 图 22-12 所 示 。 


图 22-12 超 链接 效果 


22.4.6 ”相对 路 径 和 绝对 路 径 


路 径 URL 用 来 定义 一 个 文件 、 内 容 或 者 媒体 等 的 所 在 地 址 ， 这 个 地 址 可 以 是 相对 地 址 ， 
也 可 以 是 一 个 网 站 中 的 绝对 地 址 ， 关 于 路 径 的 写法 ， 因 其 所 用 的 方式 不 同 有 相应 的 变换 。 

HTML 有 两 种 路 径 的 写法 : 相对 路 径 和 绝对 路 径 。 

1. HTML 的 相对 路 径 

相对 路 径 就 是 指 由 这 个 文件 所 在 的 路 径 引起 的 跟 其 他 文件 〈 或 文件 夹 ) 的 路 径 关 系 。 使 用 
相对 路 径 可 以 为 我 们 带 来 非常 多 的 便利 。 

。 同一 个 目录 的 文件 引用 。 

如 果 源 文件 和 引用 文件 在 同一 个 目录 里 ， 直 接 写 引用 文件 名 即 可 。 

我 们 现在 建 一 个 源 文件 abouthtml， 在 about html 里 要 引用 index .html 文件 作为 超 链接 。 

假设 abouthtml 路 径 是 : c:\Inetpubvwwwrootvsitesmewsvabout.html 

假设 index.html 路 径 是 : c:\Inetpubvwwwrootvsitesmews\index.html 

在 abouthtml 加 入 index.html 超 链接 的 代码 应 该 这 样 写 : 

<a href = "index.html">index.html</a> 

。 引用 上 级 目录 。 

/表示 源 文件 所 在 目录 的 上 一 级 目录 ，../../ 表示 源 文件 所 在 目录 的 上 上 级 目录 ， 以 此 类 推 。 

假设 about.html 路 径 是 : c:\Inetpubvwwwrootvsitesmewsvabout html 

假设 index.html 路 径 是 : ci\Inetpub\wwwroot\sites\index.html 

在 abouthtml 加 入 index.html 超 链接 的 代码 应 该 这 样 写 : 

<a href = "../index.html">index.html</a> 

。 引用 下 级 目录 。 

引用 下 级 目录 的 文件 ， 直 接 写 下 级 目录 文件 的 路 径 即 可 。 

假设 abouthtml 路 径 是 : c:\Inetpubvwwwrootvsitesmewsvabout html 


289 


网 页 设计 与 网 站 建设 完全 实战 手册 


假设 index.html 路 径 是 : ci\Inetpub\Wwwwroot\sites\news\html\index.html 

在 about.html 加 入 index.html 超 链接 的 代码 应 该 这 样 写 : 

<a href = "html/index.html">index.html</a> 

2. HTML 绝对 路 径 

HTML 绝对 路 径 指 带 域名 的 文件 的 完整 路 径 。 

比如 网 站 域名 是 www.baidu.com， 如 果 在 www 根 目录 下 放 了 一 个 文件 index.html， 这 个 文 
件 的 绝对 路 径 就 是 : http://www.baidu.com/index.html。 

假设 在 www 根 目录 下 建 了 一 个 目录 叫 news， 然 后 在 该 目录 下 放 了 一 个 文件 index.html， 
这 个 文件 的 绝对 路 径 就 是 http://www.baidu.com/news/index.html。 


22.4.7 ”设置 目标 窗口 


在 创建 网 页 的 过 程 中 ， 默 认 情 况 下 超 链 接 在 原来 的 浏览 器 窗口 中 打开 ， 可 以 使 用 target 属 
性 来 控制 打开 的 目标 窗口 。 
基本 语法 : 
<a href=" 链接 目标 ”target=" 目标 窗口 的 打开 方式 "> 
语法 说 明 : 
在 该 语法 中 ，target 参数 的 取 值 有 4 种 ， 如 表 22-3 所 示 。 
表 22-3 target 参数 取 值 


| -top ”| 在 顶层 框架 中 打开 超 链接 ， 也 可 以 理解 为 在 根 框架 中 打开 超 链接 
在 当前 框架 的 上 一 层 里 打开 超 链接 


实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 超 链接 标记 </title> 

</head> 

<body> 

<p><a href="1"> 热点 内 容 </a></p> 

<p><a href="2"> 该 怎么 感谢 您 </a><br> 

<a href="3"> 前 世 芬 芳 . 今世 流亡 </a><br> 

<a href="index2.html"” target=" blank"> 假 如， 我 不 再 出 现 </a><br> 
<a href="5" > 兄弟， 勿 悲伤 </a><br> 

<a href="6"> 现代 诗歌 中 赞美 母亲 的 诗歌 </a></p> 
</body> 

</html> 


在 代码 中 加 粗 的 代码 标记 是 设置 内 部 超 链接 的 目标 窗口 ， 在 浏览 器 中 预览 单 击 设置 超 链接 
的 对 象 ， 可 以 打开 一 个 新 的 窗口 ， 如 图 22-13 和 图 22-14 所 示 。 
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[Da se - OX | Osss 


候 各 ,我 下 再 由 和 

信人 臣 美 旦 责 你 旧 
所 7 信息 检 加 纪要 

从 入世 丰 是 再 实 撤 上 高 扑 直 办 


记忆 过 村 衣 队 的 全 
清香 位 了 鞭 向 的 二 各 

稚 外 的 中 名 在 全 罗 的 某 开 时 贡 先 
六 日 了 项 夺 《关于 省 角 的 改 全 
做 如 ,我 不 再 也 现 

省 年 MWB 的 年 


oD /Mr 


图 22-13 设置 超 链接 的 窗口 图 22-14 打开 的 目标 窗口 


22.4.8 ”电子 邮件 超 链接 mailto 

在 网 页 上 创建 E-mail 超 链接 , 可 以 使 浏览 者 能 够 快速 反馈 自己 的 意见 。 当 浏览 者 单 击 E-mail 
超 链 接 时 ， 可 以 立即 打开 浏览 器 默认 的 E-mail 处 理 程序 ， 收 件 人 邮件 地 址 被 E-mail 超 链接 中 
指定 的 地 址 自动 更 新 ， 无 须 浏览 者 输入 。 


ET TT 


基本 语法 : 

<a href="mailto: 电子 邮件 地 址 "> 链接 内 容 </a> 

语法 说 明 : 

在 该 语法 中 ， 电 子 邮 件 地址 后 面 还 可 以 增加 一 些 参数 ， 如 表 22-4 所 示 。 


表 22-4 邮件 的 参数 


[ee | 抄 送 收 件 人 <a href="mailto: 电子 邮件 地 址 ?cc= 电子 邮件 地 址 "> 链接 内 容 </a> 


电子 邮件 主题 <a href="mailto: 电子 邮件 地 址 ?subject= 主题 文字 "> 链接 内 容 </a> 
暗 送 收 件 人 <a href="mailto: 电子 邮件 地 址 ?bec= 电子 邮件 地 址 "> 链接 内 容 </a> 
电子 邮件 内 容 。 ”|<a href="mailto: 电子 邮件 地 址 ?body= 邮件 内 容 "> 链接 内 容 </a> 

实例 代码 : 

<!ldoctype html> 

<html> 

<head> 


<meta charset="utf-8"> 

<title> 电子 邮件 链接 </title> 

</head> 

<body> 

<a href="mailto:mailto: sdwa@163.com"> 联系 我 们 </a> 
</body> 

</html> 


在 代码 中 加 粗 的 标记 用 于 创建 E-mail 超 链 接 ， 在 浏览 器 中 的 浏览 效果 如 图 22-15 所 示 。 
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图 22-15 创建 E-mail 链接 


y 图 片 和 列表 


图 像 是 网 页 中 不 可 缺少 的 元 素 ， 巧 妙 地 在 网 页 中 使 用 图 像 可 以 为 网 页 增色 不 少 。 在 HTML 
文档 中 ， 列 表 用 于 提供 结构 化 的 、 容 易 阅读 的 消息 格式 ， 可 以 帮助 访问 者 方便 地 找到 信息 ， 并 
引起 访问 者 对 重要 信息 的 注意 。 


22.5.1 ”网 页 图 像 格 式 

每 天 在 网 络 上 交流 的 计算 机 数不胜数 ， 因 此 使 用 的 图 像 格式 一 定 能 够 被 每 一 个 操作 平台 接 
受 ， 当 前 万 维 网 上 流行 的 图 像 格 式 通常 以 GIF 和 JPEG 为 主 。 另 外 ， 还 有 一 种 名 叫 PNG 的 文 
件 格式 ， 也 被 越 来 越 多 地 应 用 在 网 络 中 ， 下 面 就 对 这 3 种 图 像 格 式 的 特点 进行 介绍 。 

1. GIF 格式 

GIF 是 英文 单词 Graphic Interchange Format 的 缩写 ， 即 图 像 交 换 格式 ， 文 件 最 多 可 使 用 
256 种 颜色 ， 最 适合 显示 色调 不 连续 或 具有 大 面积 单一 颜色 的 图 像 ， 例 如 导航 条 、 按 钮 、 图 标 、 
徽标 或 其 他 具有 统一 色彩 和 色调 的 图 像 。 

GIF 格式 的 最 大 优点 就 是 可 制作 动态 图 像 ， 可 以 将 数 张 静 态 文件 作为 动画 帧 串联 起 来 ， 转 
换 成 一 个 动画 文件 。 

GIF 格式 的 另 一 优点 就 是 可 以 将 图 像 以 交错 的 方式 在 网 页 中 呈现 。 所 谓 交 错 显示 ， 就 是 当 
图 像 尚未 下 载 完成 时 ， 浏 览 器 会 先 以 马赛 克 的 形式 将 图 像 慢 慢 显 示 ， 让 浏览 者 可 以 大 略 猜 出 下 
载 图 像 的 雏形 。 

2. JPEG 格式 

JPEG 是 英文 单词 Joint Photographic Experts Group 的 缩写 ， 它 是 一 种 图 像 压缩 格式 。 此 文 
件 格式 是 用 于 摄影 或 连续 色调 图 像 的 高 级 格式 ， 这 是 因为 PEG 文件 可 以 包含 数 百 万 种 颜色 。 
随 着 JPEG 文件 品质 的 提高 ， 文 件 的 大 小 和 下 载 时 间 也 会 随 之 增加 。 通 常 可 以 通过 压缩 JPEG 
文件 在 图 像 品质 和 文件 大 小 之 间 达 到 良好 的 平衡 。 

JPEG 格式 是 一 种 压缩 得 非常 紧凑 的 格式 ， 专 门 用 于 不 含 大 色 块 的 图 像 。JPEG 图 像 有 一 
定 的 失真 度 ， 但 是 在 正常 的 损失 下 肉眼 分 辨 不 出 JPEG 和 GIF 图 像 的 区 别 ， 而 JPEG 文件 只 有 
GIF 文件 的 1/4。JPEG 对 图 标 之 类 的 含 大 色 块 的 图 像 不 是 很 有 效 ， 不 支持 透明 图 和 动态 图 ， 但 
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它 能 够 保留 全 真 的 色调 板 格式 。 如 果 图 像 需要 全 彩 模式 才能 表现 效果 的 话 ，JPEG 就 是 最 佳 的 
选择 。 

3. PNG 格式 

PNG (Portable Network Graphics) 图 像 格式 是 一 种 非 破坏 性 的 网 页 图 像 文件 格式 ， 它 提供 
了 将 图 像 文 件 以 最 小 的 方式 压缩 却 又 不 造成 图 像 失真 的 技术 。 它 不 仅 具 备 了 GIF 图 像 格式 的 大 
部 分 优点 ， 而 且 还 支持 48 位 的 色彩 、 更 快 地 交错 显示 、 跨 平台 的 图 像 亮度 控制 ， 以 及 更 多 层 
的 透明 度 设 置 。 
22.5.2 图像 标 签 

有 了 图 像 文件 后 ， 就 可 以 使 用 img 标记 将 图 像 插入 到 网 页 中 ， 从 而 达到 美化 网 页 的 效果 。 


img 元 素 的 相关 属性 如 表 22-5 所 示 。 
表 22-5 img 元 素 的 相关 属性 


[人 
本 RS 拓 X 件 
mA 
via bee |WRRR 度 
bo 
ee |E 呈 
pe | 


im 
[amse | 设 定 AvIXf 的 的 | 
pg | 设 定 AvT 文 伯 傅 环 插 放 次 数 | 
[oopdemy | 设 定 AvT 文 件 傅 环 撞 KwER 
sr | 设 定 AT 文人 的 搬 交 0 式 
[wase | 人 分 关 片 
[sem | 区 人 lt 图 


基本 语法 : 
<img src=" 图 像 文件 的 地 址 "> 
语法 说 明 ; 
在 语法 中 ，src 参数 用 来 设置 图 像 文件 所 在 的 路 径 ， 这 一 路 径 可 以 是 相对 路 径 ， 也 可 以 是 
绝对 路 径 。 
22.5.3 ”用 图 像 作 为 超 链接 
设置 普通 图 像 超 链接 的 方法 非常 简单 ， 通 过 <a></a> 标记 来 实现 。 
基本 语法 : 
<a href=" 链接 目标 "> 链接 的 图 像 </a> 
语法 说 明 : 
给 图 像 添 加 超 链 接 ， 使 其 指向 其 他 的 网 页 或 文件 ， 这 就 是 图 像 超 链接 。 
实例 代码 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 设置 图 像 超 链接 </title> 
</head> 

<body> 

<a href="indexl"><img src="tt.jpg" width="1005" 
height="583"></a> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 标记 是 为 图 像 添加 空 链接 ， 在 浏览 器 中 预览 ， 当 鼠标 指针 放置 在 超 链 
接 的 图 像 上 时 ， 鼠 标 指针 会 发 生 相应 的 变化 ， 如 图 22-16 所 示 。 


图 22-16 图 像 的 超 链接 效果 


22.5.4 ”有 序列 表 


有 序列 表 就 是 列表 结构 中 的 列表 项 有 先后 顺序 的 列表 形式 ， 从 上 到 下 可 以 有 各 种 不 同 的 序 
列 编号 ， 如 1、2、3 或 a、b、c 等。 有 序列 表 始 于 <ol> 标签 。 每 个 列表 项 始 于 <li> 标签 。ol 


标记 的 属性 及 其 介绍 如 表 22-6 所 示 。 
表 22-6 ol 标记 的 属性 定义 
属性 的 类 别 说 明 
本 有 序列 表 中 列表 项 的 项 目 符号 格式 
人 有 序列 表 中 列表 项 的 起 始 数字 
在 文档 范围 内 的 识别 标志 
,| 语言 信息 
人 文本 方向 
标记 标题 
行内 样式 信息 
默认 情况 下 ,有 序列 表 的 序号 是 数字 。 通 过 type 属 性 可 以 改变 序号 的 类 型 ,包括 大 小 写字 母 、 
阿拉 伯 数 字 和 大 小 写 罗 马 数字 。 
基本 语法 : 
<ol type=" 序号 类 型 "> 
<1i> 列表 项 </1i> 
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<1i> 列表 项 </1i> 
<1i> 列表 项 </1i> 
Ss 
语法 说 明 : 
有 序列 表 的 序号 类 型 如 表 22-7 所 示 。 
表 22-7 有 序列 表 的 序号 类 型 


| 数字 1，2，3，4… 


| 小 写 英文 字母 a，b，c，d… 


大 写 英文 字母 A，B，C，D… 
小 写 罗马 数字 i， 这 ， 计 ，iv… 


大 写 罗 马 数字 I，I，IIT，IV… 


下 面 是 一 个 不 同类 型 的 有 序列 表 实例 。 
实例 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 不 同类 型 的 有 序列 表 </title> 
</head> 
<body> 
<h4> 数字 列表 : </h4> 
<ol> 
<1i> 语 文 </1i> 
<1i> 数 学 </1i> 
<1i> 英 语 </1i> 
<1i> 历 史 </1i> 
</ol> 
<h4> 字母 列表 : </h4> 
<ol type="A"> 
<1i> 语 文 </1i> 
<1i> 数 学 </1i> 
<1i> 英 语 </1i> 
<1i> 历 史 </1i> 
</olL> 
<h4> 小 写字 母 列表 : </h4> 
<ol type="a"> 
<1i> 语 文 </1i> 
<1i> 数 学 </1i> 
<1li> 英 语 </1i> 
<1i> 历史 </1i> 
</ol> 
<h4> 罗马 字母 列表 : </h4> 
<ol type="I"> 
<1i> 语 文 </1i> 
<1i> 数 学 </1i> 
<1i> 英 语 </1i> 
<1i> 历史 </1i> 
</olL> 
<h4> 小 写 罗马 字母 列表 : </h4> 
<ol type="i"> 
<1i> 语 文 </1i> 
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<1i> 数学 </1i> 
<1li> 英语 </1i> 
<1i> 历史 </1i> 

</ol> 

</body> 

</html> 


在 代码 中 加 粗 的 标记 用 于 设置 有 序列 表 的 序号 类 型 ， 在 浏览 器 中 浏览 效果 如 图 22-17 所 示 。 


图 22-17 设置 有 序列 表 的 类 型 


22.5.5 无 序列 表 


无 序列 表 就 是 列表 结构 中 的 列表 项 没有 先后 顺序 的 列表 形式 。 大 部 分 网 页 应 用 中 的 列表 均 


采用 无 序列 表 。ul 用 于 设置 无 序列 表 ， 在 每 个 项 目 文字 之 前 ， 以 项 目 符号 作为 每 条 列表 项 的 前 


缀 ， 


各 个 列表 之 间 没 有 顺序 级 别 之 分 。ul 标记 的 属性 及 其 介绍 如 表 22-8 所 示 。 
表 22-8 ul 标记 的 属性 定义 


属性 的 种 类 说 明 
标记 的 固有 属性 type = 项 目 符合 ”| 定义 无 序列 表 中 列表 项 的 项 目 符号 图 形 样式 
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dir 文本 方向 
title 标记 标题 
style 行内 样式 信息 


基本 语法 : 

<ul> 

<1i> 列表 项 </1i> 

<1i> 列表 项 </1i> 

<1i> 列表 项 </1i> 

a 

语法 说 明 : 

在 该 语法 中 , <ul> 和 </ul> 标 记 表 示 无 序列 表 的 开始 和 结束 , <li> 则 表示 一 个 列表 项 的 开始 。 
实例 代码 : 
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<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 序列 表 </title> 
</head> 
<body> 
<ul> 
<1i> 客房 卫浴 用 品 </1i> 
<1i> 可 调控 冷暖 空调 </1i> 
<1i> 卫星 电视 </1i> 
<1i> 双 线 国际 国内 直拨 电话 </1i> 
<1i> 电话 留言 信箱 </1i> 
<1i> 宽带 网 络 接 驶 端口 </1i> 
<1i> 室内 音乐 </1i> 
<1i> 吹风 机 </1i> 
<1i> 客房 小 冰箱 ， 咖 啡 和 茶 </1i> 
<1i> 保险 箱 </1i></ul> 
</body> 
</html> 


在 代码 中 加 粗 的 标记 用 于 设置 无 序列 表 ， 在 浏览 器 中 浏览 效果 如 图 22-18 所 示 。 


| 站 DN 网 于 与 网 二 建设 完全: 口 ”CX | 全 二 #7 坟 x A 
文 直 有， 需 各 日 、 下 看 NM 履带 夫人 工具 帮 劲 (| 


全 


。 诗 房 卫 汉 用品 
可 调控 准 权 全 油 
， 卫 时 由 

， 双 线 国际 国内 家 找 电 话 
电话 窗 言 信箱 

“宽带 网络 摄取 站 吕 
室内 言 乐 


。 吹风 机 
* 客房 小 冰箱 ， 如 味 和 茶 
， 保 险 箱 


图 22-18 设置 无 序列 表 


22.5.6 ” 赃 套 列表 

无 序列 表 和 有 序列 表 的 嵌 套 是 最 常见 的 列表 翌 套 ， 重 复 使 用 <ol> 和 <ul> 标记 可 以 组 合 出 
多 种 嵌 套 列表 形式 。 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 媒 套 列表 </title> 
</head> 

<body> 

<ul> 

<1i> 文 章 故事 : 

<ol><1i> 人 生 哲 理 

<1i> 励志 文章 

<1i> 伤感 文章 


</ol> 
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<1i> 散文 杂文 : 
<ol><1i> 抒情 散文 
<1i> 爱情 散文 
<1i> 散文 诗歌 
</ol> 

</ul> 

</body> 

</html> 


在 代码 中 加 粗 的 部 分 通过 <ol> 和 <ul> 标记 建立 了 有 序 和 无 序列 表 的 嵌 套 ， 运 行 代 码 后 在 
浏览 器 中 预览 网 页 ， 如 图 22-19 所 示 。 


EP [a owns meears: Pp - c x | Sasna 
Eo 


图 22-19 列表 谋 套 


py 表格 
表格 是 网 页 制作 中 使 用 最 多 的 工具 之 一 , 在 制作 网 页 时 , 使 用 表格 可 以 更 清晰 地 排列 数据 。 


22.6.1 ”创建 基本 表格 


表格 由 行 、 列 和 单元 格 3 部 分 组 成 ， 一 般 通过 3 个 标记 来 创建 ， 分 别 是 表格 标记 table、 
行 标记 tr 和 单元 格 标 记 td。 表 格 的 各 种 属性 都 要 在 表格 的 开始 标记 <table> 和 表格 的 结束 标记 
</table> 之 间 才 有 效 。 

。 行 : 表格 中 的 水 平 间隔 。 

。 列 : 表格 中 的 垂直 间隔 。 

。 单元 格 : 表格 中 行 与 列 相 交 所 产生 的 区 域 。 

基本 语法 : 

<table> 

<tr> 

<td> 单元 格 内 的 文字 </td> 

<td> 单元 格 内 的 文字 </td> 

</tr> 

3 单元 格 内 的 文字 </td> 

<td> 单元 格 内 的 文字 </td> 

过 WE 

</table> 


语法 说 明 : 
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<table> 标记 和 </table> 标记 分 别 表示 表格 的 开始 和 结束 ， 而 <tr> 和 </tr> 则 分 别 表示 行 的 
开始 和 结束 ， 在 表格 中 包含 几 组 <tr>...</tr> 就 表示 该 表格 为 几 行 ，<td> 和 </td> 表示 单元 格 的 
起 始 和 结束 。 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<table border="1"> 

<tr> 

<td> 第 1 行 第 1 列 单元 格 </td><td> 第 11 行 第 2 列 单元 格 </td> 
</tr> 

<tr> 

<td> 第 2 行 第 1 列 单元 格 </td><td> 第 2 行 第 2 列 单元 格 </td> 
</tr> 

</table> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 代码 标记 是 表格 的 基本 构成 ， 在 浏览 器 中 预览 可 以 看 到 在 网 页 中 添加 
了 一 个 2 行 2 列 的 表格 ,表格 没有 边框 ， 如 图 22-20 所 示 。 


ETEEETOEE TIETORCCT 


1 行 第 1 列 单元 格子 ! 行 第 2 绚 单元 格 | 
2 行 第 1 列 单元 格 | 辽 六 笋 2 列 单元 档 | 


图 22-20 表格 


22.6.2 ”表格 的 边框 和 颜色 

为 了 美化 表格 ， 可 以 为 表格 设 定 不 同 的 边框 颜色 。 默 认 情况 下 边框 的 颜色 是 灰色 的 ， 可 以 
使 用 bordercolor 设置 边框 颜色 。 但 是 设置 边框 颜色 的 前 提 是 边框 的 宽度 不 能 为 0， 和 否则 无 法 显 
示 出 边框 的 颜色 。 


基本 语法 : 

<table border=" 边框 宽度 "” bordercolor=" 边框 颜色 "> 
语法 说 明 : 

定义 颜色 的 时 候 ， 可 以 使 用 英文 颜色 名 称 或 十 六 进 制 颜色 值 。 
实例 代码 : 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 表格 边框 颜色 </title> 
</head> 
<body> 
<table width="500" border="2" bordercolor="#FF0000"> 
<tr> 
<td> 单元 格 1</td> 
</Er> 
<tr> 
<td> 单元 格 2</td> 
</tr> 
</table> 
</body> 
</html> 


在 代码 中 加 粗 部 分 的 代码 标记 是 设计 表格 的 边框 和 颜色 ， 在 浏览 器 中 预览 可 以 看 到 边框 颜 


色 的 效果 ， 如 图 22-21 所 示 。 


< 轩 
文 K 有 。 杭 三 日 ”查看 [此 划 六 [A) 工具 T) sb(H) 
BE | | 
基 洒 FT | 


— 二 
DE vatsmeane P- Cx|S wwene 


图 22-21 设置 了 表格 边框 及 颜色 


22.6.3 ”设置 表格 的 背景 


表格 的 背景 颜色 属性 bgcolor 是 针对 整个 表格 的 ， 通 过 bgcolor 定义 的 颜色 可 以 被 行 、 列 或 


单元 格 定义 的 背景 颜色 所 覆盖 。 
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基本 语法 : 

<table bgcolor=" 背景 颜色 "> 

语法 说 明 : 

定义 颜色 的 时 候 ， 可 以 使 用 英文 颜色 名 称 或 十 六 进 制 颜色 值 表现 。 
实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 表格 的 背景 色 </title> 

</head> 

<body> 

<table width="500" border="l"cellpadding="10" cellspacing="10" 
bordercolor="#006600" bgcolor="#FF99CC"> 
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<tr> 
<td> 单元 格 1</td> 
<tq> 单元 格 2</td> 
her 
EE 
<td> 单元 格 3</td> 
<tq> 单元 格 4</td> 
</Er> 
</table> 
</body> 
</html> 


在 代码 中 加 粗 部 分 的 代码 标记 bgcolor="#006600" 为 设置 表格 的 背景 颜色 ， 在 浏览 器 中 预 
览 可 以 看 到 表格 设置 了 黄色 的 背景 ， 如 图 22-22 所 示 。 


图 22-22 设置 表格 背景 颜色 的 效果 


22.6.4 ”表格 的 间距 与 边 距 
表格 的 单元 格 和 单元 格 之 间 ， 可 以 设置 一 定 的 距离 ， 这 样 可 以 使 表格 显得 不 会 过 于 紧凑 。 
在 默认 情况 下 ， 单 元 格 里 的 内 容 会 紧 贴 着 表格 的 边框 ， 这 样 看 上 去 非常 拥挤 。 可 以 使 用 
cellpadding 来 设置 单元 格 边框 与 单元 格 里 的 内 容 之 间 的 距离 。 
基本 语法 : 
<table cellspacing=" 间距 值 "> 
<table cellpadding=" 文字 与 边框 距离 值 "> 


实例 代码 : 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 单元 格 间距 </title> 
</head> 
<body> 
<table width="500" border="]1" bordercolor="#FF0000" cellspacing="10" 
cellpadding="10"> 
EE 
<td> 单元 格 1</td> 
<td> 单元 格 2</td> 
</tr> 
<tr> 
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<td> 单元 格 3</td> 
<td> 单元 格 4</td> 
</tr> 
</table> 
</body> 
</html> 


在 代码 中 加 粗 部 分 的 代码 标记 cellspacing="10" 设置 单元 格 的 间距 ， 在 浏览 器 中 预览 ， 可 
以 看 到 单元 格 的 间距 为 10 像素 的 效果 ， 如 图 22-23 所 示 。 


eS Brrr rE Er 


医 ZIEEIEC TIETORETT 


单元 格 1 单元 格 2 | 


单元 格 3 单元 格 + 


图 22-23 设置 单元 格 间距 的 效果 


四 去 单 


表单 的 用 途 很 多 ， 在 制作 网 页 时 ， 特 别 是 制作 动态 网 页 时 经 常会 用 到 ， 表 单 的 作用 就 是 收 
集 用 户 的 信息 ， 将 其 提交 到 服务 器 ， 从 而 实现 与 客户 的 交互 ， 它 是 HTML 页 面 与 浏览 器 端 实 
现 交 互 的 重要 手段 。 


22.7.1 ”表单 标签 


在 网 页 中 <form></form> 标记 对 用 来 创建 一 个 表单 ， 即 定义 表单 的 开始 和 结束 位 置 ， 在 标 
记 对 之 间 的 一 切 都 属于 表单 的 内 容 。 在 表单 的 <form> 标记 中 ， 可 以 设置 表单 的 基本 属性 ， 包 
括 表单 的 名 称 、 处 理 程序 和 传送 方法 等 。 

基本 语法 : 

<form name=" 表单 名 称 "> 

</ i 

语法 说 明 : 

表单 名 称 中 不 能 包含 特殊 字符 和 空格 。 

实例 代码 : 


<ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 表单 名 称 </title> 
</head> 
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<body> 

欢迎 您 预定 本 店 的 房间 。 

<form action="mailto:dian@ .com" name="forml"> 
</form> 

</body> 

</html> 


在 代码 中 加 粗 部 分 的 标记 name="form1" 是 表单 名 称 标记 。 


22.7.2 HTML 表单 控件 


在 网 页 中 插入 的 表单 对 象 包括 文本 字段 、 复 选 框 、 单 选 按钮 、 提 交 按 钮 、 重 置 按钮 和 图 像 
域 等 。 在 HTML 表单 中 ，input 标记 是 最 常用 的 表单 控件 标记 ， 包 括 常见 的 文本 字段 和 按钮 都 
采用 这 个 标记 。 

基本 语法 : 

<form> 


<input type=" 表单 对 象 ”name=" 表单 对 象 的 名 称 "> 


</form> 


在 该 语法 中 ，name 是 为 了 便于 程序 对 不 同 表单 对 象 的 区 分 ，type 则 是 确定 了 这 一 个 表单 
对 象 的 类 型 。type 所 包含 的 属性 值 如 表 22-9 所 示 。 
表 22-9 type 所 包含 的 属性 值 


22.7.3 文本 域 ( text ) 

text 标记 用 来 设置 表单 中 的 单行 文本 框 ， 在 其 中 可 输入 任何 类 型 的 文本 、 数 字 或 字母 ， 输 
入 的 内 容 以 单行 显示 。 

基本 语法 : 

<input name=" 文本 字段 的 名 称 ” type="text" value=" 文字 字段 的 默认 取 值 ” size=" 文本 字 
段 的 长 度 ”maxlength=" 最 多 字符 数 "/> 

语法 说 明 : 

在 该 语法 中 包含 了 很 多 参数 ， 它 们 的 含义 和 取 值 方法 不 同 ， 如 表 22-10 所 示 。 

表 22-10 文本 域 段 〈text) 的 参数 值 


属性 值 说 明 


name 文字 字段 的 名 称 ， 用 于 和 页 面 中 的 其 他 控件 加 以 区 别 。 名 称 由 英文 或 数字 以 及 下 画 线 组 成 ， 但 
有 大 小 写 之 分 


说 明 


指定 插入 哪 种 表单 对 象 ， 如 type 三 "text"， 即 为 文字 字段 
设置 文本 框 的 默认 值 

确定 文本 字段 在 页 面 中 显示 的 长 度 ， 以 字符 为 单位 
maxlength ”| 设置 文本 字段 中 最 多 可 以 输入 的 字符 数 


实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 文 本 域 </title> 

</head> 

<body> 文本 域 

<input name="textfield" type="text" size="25" maxlength="20"> 
</body> 

</html> 


在 代码 中 的 <input name="textfield" type="text" size="25" maxlength="20"> 标记 将 文本 域 的 名 


称 设置 为 textfield、 长 度 设 置 为 25、 最 多 字符 数 设置 为 20， 在 浏览 器 中 浏览 效果 如 图 22-24 所 示 。 
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图 22-24 设置 文本 域 


22.7.4 ”下 拉 列 表 控件 


条 


下 拉 列 表 在 页 面 中 可 以 显示 出 几 条 信息 ， 一 旦 超出 这 个 信息 量 ， 在 列表 项 右 侧 会 出 现 滚动 
拖 动 滚动 条 可 以 看 到 所 有 的 选项 。 

基本 语法 : 

<select name=" 列表 项 的 名 称 ”size=" 显示 的 列表 项 数 " multiple> 

<option value=" 选项 值 "selected> 选项 显示 内 容 

/select> 

语法 说 明 

在 语法 中 ，size 用 于 设置 在 页 面 中 的 最 多 列表 项 数 ， 当 超过 这 个 值 时 会 出 现 滚动 条 ， 


multiple 表示 这 一 下 拉 列 表 可 以 进行 多 项 选择 。 选 项 值 是 提交 表单 时 的 值 ， 而 选项 显示 内 容 才 
是 真正 在 页 面 中 显示 的 选项 。 
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实例 代码 : 


<!ldoctype html> 


<html> 

<head> 

<meta charset="utf-8"> 
<title> 下 拉 列 表 控 件 </title> 
</head> 

<body> 

<tr> 


<td class="style4"> 所 在 地 区 : </td> 


<td><select name="select" size="3" multiple> 


<option> 北京 </option> 
<option> 上 海 </option> 
<option> 天 津 </option> 
<option> 河北 省 </option> 
<option> 湖南 省 </option> 
<option> 广东 省 </option> 
<option> 山东 省 </option> 
<option> 江西 省 </option> 
<option> 江苏 省 </option> 
<option> 湖北 省 </option> 
<option> 重庆 市 </option> 
<option> 黑龙 江 省 </option> 
<option> 辽宁 省 </option> 
<option> 吉林 省 </option> 
<option> 浙江 省 </option> 
<option> 福建 省 </option> 
<option> 安徽 省 </option> 
<option> 陕西 省 </option> 
<option> 山西 省 </option> 
<option> 四 川 省 </option> 
</select></td> 
</tr> 
</body> 
</html> 


在 代码 中 加 粗 的 代码 标记 将 列表 项 的 名 称 设置 为 select， 将 显示 的 列表 项 数 设置 为 3， 并 
设置 了 多 项 列表 项 ， 在 浏览 器 中 浏览 ， 效 果 如 图 22-25 所 示 。 
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图 22-25 设置 列表 项 


本 章 小 结 


HTML 语言 是 组 成 网 页 的 基本 语言 ， 它 是 一 切 网 页 制作 的 基础 。 如 果 能 够 熟悉 掌握 并 应 用 
HTML 代码 ， 大 到 制作 网 站 ， 小 到 制作 个 人 网 页 等 ， 都 会 有 很 大 的 好 处 。 本 章 将 讲解 HTML 


的 基本 知识 。 


第 2.3 章 HTML 5 的 新 特性 


HTML 5 是 一 种 网 络 标准 ， 相 比 现 有 的 HTML 4.01 和 XHTML 1.0， 可 以 实现 更 强 的 页 面 


表现 性 能 ， 同 时 充分 调用 本 地 的 资源 ， 实 现 不 输 于 APP 的 功能 效果 。HTML 5 带 给 了 浏览 者 更 
好 的 视觉 冲击 ， 同 时 让 网 站 程序 员 更 好 地 与 HTML 语言 “沟通 ”。 


会 认识 HTML5 令 HTML 5 新 增 的 元 素 和 废除 的 元 素 
争 HTML5 与 HTML 4 的 区 别 会 ”新 增 的 属性 和 废除 的 属性 


认识 HTML 5 


HTML 5 延续 了 之 前 的 HTML 标准 并 且 进 行 了 革新 ， 对 比 它 的 革新 ， 通 过 W3C 对 其 定义 
来 说 明 : HTML 5 是 开放 Web 标准 的 基石 ， 它 是 一 个 完整 的 编程 环境 ， 适 用 于 跨 平台 应 用 程序 、 
视频 和 动画 、 图 形 、 风 格 、 排 版 和 其 他 数字 内 容 发 布 工具 、 广 泛 的 网 络 功能 等 。 

HTML 最 早 是 作为 显示 文档 的 手段 出 现 的 。 再 加 上 JavaScript， 它 其 实 已 经 演变 成 了 一 
个 系统 ， 可 以 开发 搜索 引擎 、 在 线 地 图 、 邮 件 阅 读 器 等 各 种 Web 应 用 。 虽 然 设计 巧妙 的 Web 
应 用 可 以 实现 很 多 令 人 赞叹 的 功能 ， 但 开发 这 样 的 应 用 远 非 易 事 。 多 数 都 得 手动 编写 大 量 
JavaScript 代码 ， 还 要 用 到 JavaScript 工具 包 ， 乃 至 在 Web 服务 器 上 运行 的 服务 器 端 Web 应 用 。 
要 让 所 有 这 些 方面 在 不 同 的 浏览 器 中 都 能 紧密 配合 不 出 差错 是 一 个 挑战 。 由 于 各 大 浏览 器 厂商 
的 内 核 标准 不 一 样 ， 使 得 Web 前 端 开发 者 通常 在 兼容 性 问题 引起 的 bug 上 要 浪费 很 多 的 精力 。 

HTML 5 是 于 2010 年 正式 推出 的 ， 随 后 便 引起 了 世界 上 各 大 浏览 器 开发 商 的 极 大 热情 ， 
包括 Fire Fox、chrome、IE 9 等 。 

在 新 的 HTML 5 语法 规则 当中 ， 部 分 JavaScript 代码 将 被 HTML 5 的 新 属性 所 替代 ， 部 分 
DIV 的 布局 代码 被 HTML 5 变 为 更 加 语义 化 的 结构 标签 , 这 使 得 网 站 前 端的 代码 变 得 更 加 精炼 、 
简洁 和 清晰 ， 让 代码 的 开发 者 也 对 代码 所 要 表达 的 意思 更 加 一 目 了 然 。 

HTML 5 是 一 种 设计 用 来 组 织 Web 内 容 的 语言 ， 其 目的 是 通过 创建 一 种 标准 的 和 直观 的 标 
记 语 言 ， 使 Web 设计 和 开发 变 得 容易 起 来 。HTML 5 提供 了 各 种 切割 和 划分 页 面 的 手段 ， 允 许 
创建 的 切割 组 件 不 仅 能 用 来 逻辑 地 组 织 站 点 ， 而 且 能 够 赋予 网 站 聚合 的 能 力 。 这 是 HTML 5 富 
于 表现 力 的 语义 和 实用 性 美学 的 基础 ，HTML 5 赋予 设计 者 和 开发 者 各 种 层面 的 能 力 来 向 外 发 
布 各 式 各 样 的 内 容 ， 从 简单 的 文本 内 容 到 丰富 的 、 交 互 式 的 多 媒体 无 不 包括 在 内 。 如 图 23-1 
所 示 是 用 HIML 5 技术 实现 的 动画 特效 。 


图 23-1 用 HTML 5 技术 实现 的 动画 特效 


HTML 5 提供 了 高 效 的 数据 管理 、 绘 制 、 
视频 和 音频 工具 ， 促 进 了 Web 上 的 和 便携 式 
设备 的 跨 浏览 器 应 用 的 开发 。HTML 5 允许 更 
大 的 灵活 性 ， 支 持 开发 非常 精彩 的 交互 式 网 
站 。 它 还 引入 了 新 的 标签 和 增强 性 的 功能 ， 
其 中 包括 了 一 个 优雅 的 结构 、 表 单 的 控制 ， 
API、 多 媒体 、 数 据 库 支持 和 显著 提升 的 处 理 
速度 等 。 如 图 23-2 所 示 是 使 用 HIML 5 制作 
的 抽奖 游戏 。 


图 23-2 使 用 HTML 5 制作 的 抽奖 游戏 
HTML 5 中 的 新 标签 都 是 高 度 关联 的 ， 标 


签 封装 了 它们 的 作用 


和 用 法 。HTML 的 过 去 
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版 本 更 多 地 是 使 用 非 描述 性 的 标签 ， 然 而 ， 
HTML 5 拥有 高 度 描 述 性 的 、 直 观 的 标签 ， 它 
提供 了 丰富 的 能 够 立刻 让 人 识别 出 内 容 的 内 
容 标签 。 例 如 ， 被 频繁 使 用 的 <div> 标签 已 经 
有 了 两 个 增补 进来 的 <section> 和 <article> 标 
签 。<video>、<audio>、<canvas> 和 <figure> 
标签 的 增加 也 提供 了 对 特定 类 型 内 容 更 加 精 
确 的 描述 。 

HIML 5、CSS 3 带 日 期 区 间 的 日 期 选择 
插件 ， 如 图 23-3 所 示 ， 其 外 观 还 是 非常 清新 
简易 的 。 另 外 ， 该 日 期 选择 插件 还 有 一 个 最 
大 的 特点 ， 那 就 是 可 以 自 定义 日 期 的 区 间 ， 
我 们 可 以 快速 地 制定 区 间 范 围 内 的 日 期 ， 非 
常 方便 。 
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图 23-3 HIML 5、CSS 3 带 日 期 区 间 的 日 期 
选择 插件 


HTML 5 取消 了 HTML 4.01 的 一 部 分 被 
CSS 取代 的 标记 ， 提 供 了 新 的 元 素 和 属性 。 
部 分 元 素 对 于 搜索 引擎 能 够 更 好 地 索引 整理 ， 
对 于 小 屏幕 的 设置 和 视 障 人 士 提 供 了 更 好 的 
帮助 -HTML 5 还 采用 了 最 新 的 表单 输入 对 象 ， 
并 引入 了 微 数据 ， 这 一 使 用 机 器 可 以 识别 的 
标签 标注 内 容 的 方法 ， 使 语义 Web 的 处 理 更 
为 简单 。 


HTML 5 与 HTML 4 的 区 别 


HTML 5 是 最 新 的 HTML 标准 ，HTML 5 语言 更 加 精简 ， 解 析 的 规则 更 加 详细 。 针 对 不 同 
的 浏览 器 ， 即 使 语法 错误 也 可 以 显示 出 同样 的 效果 。 下 面 列 出 的 就 是 一 些 HIML 4 和 HTML 5 


之 间 主 要 的 不 同 之 处 。 
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23.2.1 HTML 5 的 语法 变化 

HTML 的 语法 是 在 SGML 语言 的 基础 上 建立 起 来 的 。 但 是 SGML 语法 非常 复杂 ， 要 开发 
能 够 解析 SGML 语法 的 程序 也 很 不 容易 ， 所 以 很 多 浏览 器 都 不 包含 SGML 的 分 析 器 。 因 此 ， 
虽然 HTML 基本 遵从 SGML 的 语法 ， 但 是 对 于 HTML 的 执行 在 各 浏览 器 之 间 并 没有 一 个 统一 
的 标准 。 

在 这 种 情况 下 ， 各 浏览 器 之 间 的 互 兼容 性 和 互 操作 性 ， 在 很 大 程度 上 取决 于 网 站 或 网 络 应 
用 程序 的 开发 者 们 在 开发 上 所 做 的 共同 努力 ， 而 浏览 器 本 身 始终 是 存在 缺陷 的 。 

在 HTML 5 中 提高 Web 浏览 器 之 间 的 兼容 性 是 它 的 一 个 很 大 的 目标 ， 为 了 确保 兼容 性 ， 
就 要 有 一 个 统一 的 标准 。 因 此 ， 在 HTML 5 中 ， 就 围绕 着 这 个 Web 标准 ， 重 新 定义 了 一 套 在 
现 有 的 HTML 的 基础 上 修改 而 来 的 语法 ， 使 它 运行 在 各 浏览 器 时 各 浏览 器 都 能 够 符合 这 个 通 
用 标准 。 

因为 关于 HTML 5 语法 解析 的 算法 也 都 提供 了 详细 的 记载 ， 所 以 各 Web 浏览 器 的 供应 商 
们 可 以 把 HTML 5 分 析 器 集中 封装 在 自己 的 浏览 器 中 。 最 新 的 Firefox (默认 为 4.0 以 后 的 版 本 ) 
与 WebKit 浏览 器 引擎 中 都 迅速 地 封装 了 供 HTML 5 使 用 的 分 析 器 。 


23.2.2 ”HTML 5 中 的 标记 方法 

下 面 我 们 来 看 看 在 HTML 5 中 的 标记 方法 。 

1. 内 容 类 型 (ContentType) 

HTML 5 的 文件 扩展 名 与 内 容 类 型 保持 不 变 。 也 就 是 说 , 扩展 名 仍然 为 “.html” 或 “.htm”， 
内 容 类 型 (ContentType) 仍然 为 “text/HTML”。 

2. DOCTYPE 声明 

DOCTYPE 声明 是 HTML 文件 中 必 不 可 少 的 ， 它 位 于 文件 第 一 行 。 在 HIML 4 中 ， 它 的 
声明 方法 如 下 : 

<!IDOCTYPE HTML> 

DOCTYPE 声明 是 HTML 5 里 众多 新 特征 之 一 。 现 在 只 需要 写 <!DOCTYPE HIML> 就 行 了 。 
HTML 5 中 的 DOCTYPE 声明 方法 (不 区 分 大 小 写 ) 如 下 : 

<!IDOCTYPE HTML> 

3. 指定 字符 编码 

在 HTML 中 ， 可 以 使 用 对 元 素 直接 追加 charset 属性 的 方式 来 指定 字符 编码 ， 如 下 : 

<meta charset="UTF-8"> 


在 HTML 5 中 ， 这 两 种 方法 都 可 以 使 用 ， 但 是 不 能 同时 混合 使 用 两 种 方式 。 
23.2.3 HTML 5 语法 中 的 3 个 要 点 


HTML 5 中 规定 的 语法 ， 在 设计 上 兼顾 了 与 现 有 HIML 之 间 最 大 程度 的 兼容 性 。 下 面 就 来 
看 看 具体 的 HIML 5 的 语法 。 

1. 可 以 省 略 标签 的 元 素 

在 HTML 5 中 ， 有 些 元 素 可 以 省 略 标签 ， 具 体 来 讲 有 3 种 情况 : 

@ 必 须 写 明 结束 标签 。 
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area、base、br、col、command、embed、hr、img、input、keygen、1Link、meta、Param、 
source、 track、, wbr 


@@ 可 以 省 略 结束 标签 。 

1i、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th 

图 可 以 省 略 整个 标签 。 

HTML、head、bodqy、colgroup、tbody 

需要 注意 的 是 ， 昌 然 这 些 元 素 可 以 省 略 ， 但 实际 上 却 是 隐形 存在 的 。 

例如 : “<body>” 标 签 可 以 省 略 , 但 在 DOM 树 上 它 是 存在 的 ,可 以 永恒 访问 到 “document. 
body”。 


2.， 取得 boolean 值 的 属性 

取得 布尔 值 (boolean) 的 属性 , 例如 disabled 和 readonly 等 , 通过 默认 属性 的 值 来 表达 “ 值 
为 tue”。 

此 外 ， 在 属性 值 为 tue 时， 可 以 将 属性 值 设 为 属性 名 称 本 身 ， 也 可 以 将 值 设 为 空 字符 串 。 

<!-- 以 下 的 checked 属性 值 皆 为 true--> 


<input type="checkbox" checked> 
<input type="checkbox" checked="checked"> 
<input type="checkbox" checked=""> 


3. 省 略 属性 的 引用 符 

在 HIML 4 中 设置 属性 值 时 ， 可 以 使 用 双 引 号 或 单 引号 来 引用 。 

在 HTML 5 中 ,只 要 属性 值 不 包含 空格 、“<”、“>”、“”、“"”、“”、“=” 等 字符 ， 
都 可 以 省 略 属性 的 引用 符 。 

实例 如 下 : 


<input type="text"> 
<input type='text'> 
<input type=text> 


23.2.4 ”标签 实例 


在 <html> 标签 中 进行 这 样 的 申明 : <html xmlns:huangyu>，xmlns 即 xml name space 的 缩写 。 
是 HIML 标记 的 命名 空间 属性 ， 一 般 其 声明 在 元 素 开 始 标记 的 地 方 。 只 要 在 这 里 申明 了 我 要 
使 用 的 <huangyu/> 这 一 自 定义 标签 ， 语 法 分 析 器 就 会 认识 这 个 标签 并 赋予 我 定义 的 属性 了 。 
实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 自 定义 HTML 标签 </title> 

<style type="text/css"> 

huangyu/:sorry{border:lpx solid #ccc;background-color:#efefef;font— 
weight:bold;} 

huangyu/:love{border:lpx solid red;background-color: #FFFS5F4;font- 
weight:bold;} 

</style> 

</head> 

<body> 

<huangyu: sorry> 同学 们 ,</huangyu: sorry> 
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<huangyu:love> 早上 好 !</huangyu:1love> 
</body 
</html> 


在 代码 中 加 粗 部 分 的 代码 标记 在 自 定义 代码 标签 ， 在 浏览 器 中 的 效果 如 图 23-4 所 示 。 


PB) Diat snes P- cx | 
文件 乱 (E) 豆 硬 M) 家 下 天 (A 工具 Mm 丰 芭 () 


同学 们 ,早上 好 ! 


图 23-4 页 面 标题 


HTML 5 新 增 的 元 素 和 废除 的 元 素 


本 节 将 详细 介绍 HIML 5 中 新 增 的 元 素 和 废除 的 元 素 。 


23.3.1 ”新 增 的 结构 元 素 


HTML 4 由 于 缺少 结构 ， 即 使 是 形式 良好 的 HTML 页 面 也 比较 难以 处 理 。 必 须 分 析 标 题 的 


级 别 ， 才 能 看 出 各 个 部 分 的 划分 方式 。 边 栏 、 页 脚 、 页 眉 、 导 航 条 、 主 内 容 区 和 各 篇 文章 都 由 
通用 的 DIV 元 素来 表示 。HTML 5 添加 了 一 些 新 元 素 ， 专 门 用 来 标识 这 些 常 见 的 结构 ， 不 再 需 
要 为 DIV 的 命名 费 尽 心思 ， 对 于 手机 、 阅 读 器 等 设备 更 有 好 处 。 


HTML 5 增加 了 新 的 结构 元 素来 表达 这 些 最 常用 的 结构 : 

。 “section: 可 以 表达 书本 的 一 部 分 或 一 章 ， 或 者 一 章 内 的 一 节 。 

header: 页 面 主体 上 的 头 部 ， 并 非 head 元 素 。 

footer: 页 面 的 底部 〈 页 脚 )》， 可 以 是 一 封 邮 件 签 名 的 所 在 。 

nav: 到 其 他 页 面 的 链接 集合 。 

article: blog、 杂 志 、 文 章 汇编 等 中 的 一 篇 文章 。 

1.，section 元 素 

section 元 素 表示 页 面 中 的 一 个 内 容 区 块 ， 比 如 章节 、 页 眉 、 页 脚 或 页 面 中 的 其 他 部 分 。 它 


可 以 与 hl、h2、h3、h4、h5、h6 等 元 素 结合 起 来 使 用 ， 标 识 文档 结构 。 
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HTML 5 中 的 代码 示例 : 

<section>...</section> 

2. header 元 素 

header 元 素 表示 页 面 中 一 个 内 容 区 块 或 整个 页 面 的 标题 。 
HIML 5 中 的 代码 示例 : 


<header>...</header> 


3. footer 元 素 

footer 元 素 表示 整个 页 面 或 页 面 中 一 个 内 容 区 块 的 脚注 一般 来 说 , 它 会 包含 创作 者 的 姓名 、 
创作 日 期 及 创作 者 联系 信息 。 

HTML 5 中 的 代码 示例 : 

<footer>...</footer> 

4. nav 元 素 

nav 元 素 表示 页 面 中 导航 链接 的 部 分 。 

HTML 5 中 的 代码 示例 : 

<nav>...</nav> 

5. article 元 素 

article 元 素 表示 页 面 中 的 一 块 与 上 下 文 不 相关 的 独立 内 容 ， 如 博客 中 的 一 篇 文章 或 报纸 中 
的 一 篇 文章 。 

HIML 5 中 的 代码 示例 : 

<article>...</article> 

下 面 是 一 个 网 站 的 页 面 ， 用 HTML 5 编写 代码 。 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>HTML 5 新 增 结构 元 素 </title> 

</head> 

<body> 

<header> 

<hl> 阳光 科技 公司 </h1></header> 

<section> 

<article> 

<h2><a href=" " > 标题 1</a></h2> 

<p> 内 容 1. . . (省 略 字 ) </p></article> 

<article> 

<h2><a href=" " > 标题 2</a></h2> 

<p> 内 容 2 在 此 . . . (省 略 字 ) </p> 

</article> 

</section> 

<footer> 

<nav> 

<ul> 

<li><a href=" " > 导航 1</a></1i> 

<1i><a href=" " > 导航 2</a></1i> 
a /> 

</nav> 

<p>® 2014 阳光 科技 公司 </p> 

</footer> 

</body> 

</HTML> 


运行 代码 ， 在 浏览 器 中 浏览 效果 ， 如 图 23-5 所 示 。 这 些 新 元 素 的 引入 ， 将 不 再 使 得 布局 
中 都 是 Div， 而 是 通过 标签 元 素 就 可 以 识别 出 来 每 个 部 分 的 内 容 定 位 。 这 种 改变 对 于 搜索 引擎 
而 言 ， 将 带 来 内 容 准确 度 的 极 大 飞跃 。 
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图 23-5 HTML 5 新 增 结构 元 素 实 例 


23.3.2 ”新 增 的 块 级 语义 元 素 

HTML 5 还 增加 了 一 些 纯 语义 性 的 块 级 元 素 : aside、figure、figcaption、dialog。 

。 aside: 定义 页 面 内 容 之 外 的 内 容 ， 比 如 侧 边 栏 。 

。 figure: 定义 媒介 内 容 的 分 组 ， 以 及 它们 的 标题 。 

。 ”figcaption: 媒介 内 容 的 标题 说 明 。 

。 dialog: 定义 对 话 〈 会 话 ) 。 

aside 可 以 用 于 表达 注 记 、 侧 栏 、 摘 要 、 插 入 的 引用 等 作为 补充 主体 的 内 容 。 下 面 通过 实 
例 表 达 blog 的 侧 栏 ， 在 浏览 器 中 浏览 的 效果 如 图 23-6 所 示 。 

实例 代码 : 


<aside> 

<h3> 最 新 文章 </h3> 

<ul> 

<1i><a href="#"” > 文章 标题 </a></1i> 
</ul> 

</aside> 


figure 元 素 表示 一 段 独立 的 流 内 容 ， 一 般 表示 文档 主题 流 内 容 中 的 一 个 独立 单元 。 使 用 
figcaption 元 素 为 figure 元 素 组 添加 标题 。 看 看 给 图 片 添加 的 标注 ，HTML 4 和 HTML 5 中 的 代 
码 有 所 区 别 。 
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HIML4 中 代码 示例 : 


<img src="index.jpg”alt=" 糖果 箱包 " /> 
<p> 糖果 箱包 </p> 
上 面 的 代码 文字 在 p 标签 里 ， 与 img 标签 各 行 其 道 ， 很 难 让 人 联想 到 这 就 是 标题 。 
HTML 5 中 代码 示例 : 
<figure> 

<img src="1.jpg”alt=" 糖果 箱包 " /> 

<figcaption> 

<p> 糖果 箱包 </p> 
</figcaption> 
</figure> 
运行 代码 ， 在 浏览 器 中 浏览 ， 效 果 如 图 23-6 所 示 。HTML 5 通过 采用 figure 元 素 对 此 进行 
了 改正 。 当 与 fgcaption 元 素 组 合 使 用 时 , 我 们 就 可 以 语义 化 地 联想 到 这 就 是 图 片 相对 应 的 标题 。 


图 23-6 figure 元 素 应 用 实例 


dialog 元 素 用 于 表达 人 们 之 间 的 对 话 。 在 HTML 5 中 ，dt 用 于 表示 说 话 者 ， 而 dd 则 用 来 
表示 说 话 者 的 内 容 。 

实例 代码 : 

<dialog> 

<qdt> 问 </dt> 

<dd> 孩子 成 绩 上 不 去 ， 家 长 心疼 又 心急 ? </dd> 

<dt> 答 </at> 

<dd> 家 长 比较 忧心 的 是 ， 孩 子 学 习 效率 低 ， 耽 误 孩 子 的 前 程 。 孩 子 天 天 起 早 贪 黑 上 学 ， 加 班 加 点 补课 ， 
见缝插针 做 题 ， 陷 入 书 山 题 海 的 迷茫 之 中 ， 眼 看 孩子 小 小 年 纪 就 高 度 近视 ， 青 春 的 脸 上 被 作业 压 得 毫 无 朝气 ， 
生生 全 全 人 人 全 为 了 将 来 考 个 好 重点 、 上 个 好 大 学 、 找 个 好 工作 ， 除 了 鼓励 孩子 坚持 ， 又 能 怎么 

? </dd> 

<aqt> 问 </at> 

<dd> 吃力 苦 学 不 进步 ， 孩 子 痛苦 又 无 奈 ? </dd> 

<dat> 答 </at> 

<dd> 现在 孩子 竞争 激烈 ， 为 考 上 理想 的 学 校 ， 孩 子 锦 足 全 力 死命 学 习 ， 但 结果 让 孩子 痛苦 无 奈 。 家 住 北 
京 海淀 区 的 王 同学 最 近 很 压抑 : " 我 天 天 早起 晚 睡 ， 周 末 就 上 补习 班 ， 好 不 容易 考 入 重点 初中 ， 但 上 初中 后 越 


和 学 习 能 力 跟 不 上 讲课 的 进度 和 难度 , 尽管 我 比 以 前 更 努力 , 但 成 绩 始终 没有 突破 , 我 真 的 很 迷茫 、 
。</dd> 


</dialog> 


运行 代码 ， 在 浏览 器 中 浏览 ， 效 果 如 图 23-7 所 示 。 
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图 23-7 dialog 元 素 应 用 实例 


23.3.3 ”新 增 的 行内 语义 元 素 


HTML 5 增加 了 一 些 行内 语义 元 素 : mark、time、meter、progress。 

。 ”mark: 定义 有 记号 的 文本 。 

。 time: 定义 日 期 /时 间 。 

。 meter: 定义 预定 义 范围 内 的 度量 。 

。 ”progress: 定义 运行 中 的 进度 。 

<mark> 元 素 是 HTML 5 中 新 增 的 元 素 , 主要 功能 是 在 文本 中 高 亮 显 示 某 个 或 某 几 个 字符 ， 


旨 在 引起 用 户 的 特别 注意 。 其 使 用 方法 与 <em> 和 <strong> 有 相似 之 处 ， 但 相 比 而 言 ，HIML 
5 中 新 增 的 <mark> 元 素 在 突出 显示 时 ， 更 加 随意 与 灵活 。 


实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>mark 元素 </title> 

</head> 

<body> 

<p> 别 忘记 今天 是 <mark> 星期 六 </mark>。</p> 
</body> 

</HTML> 


运行 代码 ,在 浏览 器 中 浏览 效果 如 图 23-8 所 示 ，<mark> 与 </mark> 标签 之 间 的 文字 “ 星 


期 六 ”添加 了 记号 。 


图 23-8 mark 元 素 应 用 实例 


<time> 是 HIML 5 新 增加 的 一 个 标记 ， 用 于 定义 时 间或 日 期 。 该 元 素 可 以 代表 24 小 时 
中 的 某 一 时 刻 ， 在 表示 时 刻 时 ， 人 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 该 元 素 的 属性 
“datetime” 设 为 相应 的 时 间或 日 期 即 可 。 

实例 代码 ; 


<p id="p1"> 
<time datetime="2014-10-25"> 今 天 是 2014 年 10 月 25 日 </time> 
<p> 
<time datetime="2014-10-10T20:00"> 现在 时 间 是 2014 年 10 月 25 日 早上 8 点 </time> 


<p> 元 素 ID 号 为 “pl1” 中 的 <time> 元 素 表 示 的 是 日 期 。 页 面 在 解析 时 ， 获 取 的 是 属性 
“datetime” 中 的 值 ， 而 标记 之 间 的 内 容 只 是 用 于 显示 在 页 面 中 。 

<p> 元 素 ID 号 为 “p2” 中 的 <time> 元 素 表 示 的 是 日 期 和 时 间 ， 它 们 之 间 使 用 字母 “T” 
进行 分 隔 。 

运行 代码 ， 在 浏览 器 中 浏览 ， 效 果 如 图 23-9 所 示 。 


人 90， 了 SI 和 
今天 是 2014 年 10 月 25 日 
现在 时 间 是 2014 年 10 月 25 日 早上 8 点 


图 23-9 time 元 素 应 用 实例 


progress 是 HTML 5 中 新 增 的 状态 交互 元 素 ， 用 来 表示 页 面 中 的 某 个 任务 完成 的 进度 〈 进 
程 ) 。 例 如 下 载 文件 时 ， 文 件 下 载 到 本 地 的 进度 值 ， 可 以 通过 该 元 素 动态 地 展示 在 页 面 中 ， 展 
示 的 方式 既 可 以 使 用 整数 (如 1 ~ 100) ， 也 可 以 使 用 百分比 (如 10% ~ 100%) 。 

下 面 通过 一 个 实例 介绍 progress 元 素 在 文件 下 载 时 的 使 用 。 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>progress 元 素 在 下 载 中 的 使 用 </title> 
<style type="text/css"> 
body { font-size:13px} 

p {padding:0px; margin:0px } 
.inputbtn { 

border:solid lpx #ccc; 
background-color:#eee; 
line-height:18px; 
font-size:12px 

} 

</style> 

</head> 

<body> 
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<p idq="pTip"> 开始 下 载 </p> 

<progress value="0" max="100" id="proDownFile"></progress> 
<input type="button"” value=" 下 载 " class="inputbtn™" 
onClick="Btn Click();"> 

<script type="text/javascript"> 

var intValue = 0; 

var intTimer; 


Var objPro = document .getElementById('proDownFile'); 

var objTip = document .getElementById('pTip'); // 定时 事件 
function Interval handler() { 

intValue++7 

objPro.value = intValue; 

if (intValue >= objPro.max) { clearInterval (intTimer); 
objTip.innerHTML = "下 载 完成 !"; } 

else { 

objTip.innerHTML = "正在 下 载 ”+ intValue + "%"; 


} 
} ”// 下 载 按钮 单 击 事件 
function Btn Click(){ 
intTimer = setInterval (Interval handler, 100); 
} 
</script> 
</body> 


HTML 为 了 使 progress 元 素 能 动态 地 展示 下 载 进度 ， 需 要 通过 JavaScript 代码 编写 一 个 定 


时 事件 。 在 该 事件 中 ， 累 加 变量 值 ， 并 将 该 值 设置 为 progress 元 素 的 “value” 属 性 值 ， 当 这 个 
属性 值 大 于 或 等 于 progress 元素 的 “max” 属 性 值 时 , 则 停止 累加 , 并 显示 “下 载 完成 ! ”的 字样 ; 
否则 ， 动 态 显 示 正 在 累加 的 百分比 数 ， 如 图 23-10 所 示 。 
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图 23-10 progress 元 素 应 用 实例 
meter 元 素 用 于 表示 在 一 定数 量 范围 中 的 值 , 如 投票 中 , 候选 人 所 占 比例 情况 及 考试 分 数 等 。 


下 面 通过 一 个 实例 介绍 meter 元 素 在 展示 投票 结果 时 的 使 用 。 
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实例 代码 : 


<!DOCTYPE HTML> 

<HTML> 

<head> 

<meta charset="utf-8" /> 
<title>meter 元 素 </title> 
<style type="text/css"> 

body { font-size:1l3px } 
</style> 

</head> 


<body> 

<p> 共有 100 人 参与 投票 ， 投 票 结果 如 下 : </p> 

<p> 夏 明 : 

<meter value="0.40" optimum="1l"high="0.9" low="1" max="]1" min="0"></meter> 
<span> 40% </span> 

</p> 

<p> 李 红 : 

<meter value="60" optimum="100" high="90" low="10" max="100" min="0"> 
</meter> 

<span> 60% </span> 

</p> 

</body> 

</HTML> 


候选 人 “ 夏 明 ” 所 占 的 比例 是 百分制 中 的 40， 最 低 比 例 可 能 为 0， 但 实际 最 低 为 10， 最 


高 比例 可 能 为 100， 但 实际 最 高 为 90"。 如 图 23-11 所 示 。 


2 由。 山寺 EV tN IRT) Ri) 
0 人吉 与 机 要 ， 拉 要 冰 秽 和 下: 

:0% 
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图 23-11 meter 元 素 应 用 实例 


23.3.4 ”新 增 的 嵌入 多 媒体 元 素 与 交互 性 元 素 


HTML 5 新 增 了 很 多 多 媒体 和 交互 性 元 素 如 video、 audio。 在 HIML 4 当中 如 果 要 和 嵌入 一 


个 视频 或 是 音频 的 话 ， 需 要 引入 一 大 段 代 码 ， 且 要 兼容 各 个 浏览 器 ， 而 HTML 5 只 需要 通过 引 
入 一 个 标签 就 可 以 ， 就 像 img 标签 一 样 方便 。 


1. video 元 素 

video 元 素 定义 视频 ， 如 电影 片段 或 其 他 视频 流 。 

HTML 5 中 代码 示例 : 

<video src="movie.ogg"” controls="controls">video 元 素 </video> 
HTML 4 中 代码 示例 : 


<object type="video/ogg" data="movie.ogv"> 
<param name="src" value="movie.ogv"> 
</object> 


2. audio 元 素 
audio 元 素 定义 音频 ， 如 音乐 或 其 他 音频 流 。 
HTML 5 中 代码 示例 : 


<audio src="someaudio.wav">audio 元 素 </audio> 
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HTML 4 中 代码 示例 : 


<object type="application/ogg" data="someaudio.wav"> 
<param name="src" value="someaudio.wav"> 
</object> 


3. embed 元 素 

embed 元 素 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 Midi、Wav、AIFF、AU、MP3 等 。 
HTML 5 中 代码 示例 : 

<embed src="horse.wav" /> 

HTML 4 中 代码 示例 : 


<object data="flash.swf" type="application/x-shockwave-flash"></object> 


23.3.5 ”新 增 的 input 元 素 的 类 型 

在 制作 网 站 页 面 的 时 候 ， 难 免 会 碰 到 表单 的 开发 ， 用 户 输入 的 大 部 分 内 容 都 是 在 表单 中 完 
成 再 提交 到 后 台 的 。 在 HIML 5 中 ， 也 提供 了 大 量 的 表单 功能 。 

在 HIML 5 中 ， 对 input 元 素 进行 了 大 幅度 的 改进 ， 使 得 我 们 可 以 简单 地 使 用 这 些 新 增 的 
元 素来 实现 需要 JavaScript 来 能 实现 的 功能 。 

1.URL 类 型 

input 元 素 里 的 URL 类 型 是 一 种 专门 用 来 输入 URL 地 址 的 文本 框 。 如 果 该 文本 框 中 的 内 
容 不 是 URL 地 址 格式 的 文字 ， 则 不 允许 提交 。 例 如 : 


<form> 
<input name="urls" type="url" value="http://www.baidu.com "/> 
<input type="submit" value=" 提交 "/> 
</form> 


设置 此 类 型 后 ,从 外 观 上 来 看 与 普通 的 元 素 差不多 , 可 是 如 果 你 将 此 类 型 放 到 表单 中 之 后 ， 
单 击 “ 提 交 ” 按 钮 ， 如 果 此 文本 框 中 输入 的 不 是 一 个 URL 地 址 ， 将 无 法 提交 ， 如 图 23-12 所 示 。 


图 23-12 url 类 型 实例 
2. E-mail 类 型 
如 果 将 上 面 的 URL 类 型 的 代码 中 的 type 修改 为 email， 那 么 在 表单 提交 的 时 候 ， 会 自动 
验证 此 文本 框 中 的 内 容 是 否 为 email 格式 ， 如 果 不 是 ， 则 无 法 提交 。 代 码 如 下 : 


<form> 
<input name="email" type="email" value=" http://www. baidu.com/"/> 


318 


<input type="submit"” value=" 提交 "/> 
</form> 


3. date 类 型 
input 元 素 里 的 date 类 型 在 开发 网 页 过 程 中 是 很 常见 的 。 例 如, 我们 经 常 看 到 的 购买 日 期 、 
发 布 时 间 、 订 票 时 间 。 这 种 date 类 型 的 时 间 是 以 日 历 的 形式 来 方便 用 户 输入 的 。 


<form> 
<input id="lykongtiao date" name=" baidu.com" type="date"/> 
<input type="submit" value=" 提交 "/> 

</form> 


4. time 类 型 
input 里 的 time 类 型 是 专门 用 来 输入 时 间 的 文本 框 ， 并 且 会 在 提交 时 对 输入 时 间 的 有 效 性 
进行 检查 。 它 的 外 观 可 能 会 根据 不 同类 型 的 浏览 器 而 出 现 不 同 的 表现 形式 。 


<form> 
<input id=" linyikongtiao time" name=" baidu " type="time"/> 
<input type="submit" value=" 提交 "/> 

</form> 


5. DateTime 类 型 
Datetime 类 型 是 一 种 专门 用 来 输入 本 地 日 期 和 时 间 的 文本 框 ， 同 样 ， 它 在 提交 的 时 候 也 会 
对 数据 进行 检查 。 目 前 主流 浏览 器 都 不 支持 DateTime 类 型 。 


<form> 
<input id=" linyikongtiao datetime" name=" linyikongtiao.com" 
type="datetime"/> 
<input type="submit" value=" 提交 "/> 
</form> 


23.3.6 ”废除 的 元 素 

在 HTML 5 中 废除 了 很 多 元 素 ， 下 面 分 别 介绍 。 

1. 能 使 用 CSS 替代 的 元 素 

对 于 basefont、big、center、font、s、strike、tt、u 这 些 元 素 ， 由 于 它们 的 功能 都 是 纯粹 为 
页 面 样式 服务 的 ， 而 HIML 5 中 提倡 把 页 面 样式 功能 放 在 CSS 样式 表 中 编辑 ， 所 以 将 这 些 元 
素 废除 了 。 

2. 不 再 使 用 frame 框架 

对 于 frameset、frame 与 noframes 元 素 ， 由 于 frame 框架 对 网 页 可 用 性 存在 负面 影响 ， 在 
HTML 5 中 已 不 支持 frame 框架 ， 只 支持 这 ame 框架 ， 同 时 将 以 上 这 3 个 元 素 废除 。 

3. 只 有 部 分 浏览 器 支持 的 元 素 

对 于 applet、bgsound、blink、marquee 等 元 素 ， 由 于 只 有 部 分 浏览 器 支持 这 些 元 素 ， 特 
别 是 bgsound 元 素 及 marquee 元 素 ， 只 被 Internet Explorer 所 支持 ， 所 以 在 HIML 5 中 被 废 
除 。 其 中 applet 元 素 可 由 embed 元 素 或 object 元 素 替 代 ，bgsound 元 素 可 由 audio 元 素 替 代 ， 
marquee 可 以 由 JavaScript 编程 的 方式 所 替代 。 

4. 其 他 被 废除 的 元 素 

其 他 被 废除 元 素 如 下 : 
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网 页 设计 与 网 站 建设 完全 实战 手册 


废除 acronym 元 素 ， 使 用 abbr 元 素 替 代 。 

废除 dir 元 素 ， 使 用 ul 元 素 替 代 

废除 isindex 元 素 ， 使 用 form 元 素 与 input 元 素 相 结合 的 方式 替代 。 
废除 listing 元 素 ， 使 用 pre 元 素 替 代 。 

废除 xmp 元 素 ， 使 用 code 元 素 替 代 。 

废除 nextid 元 素 ， 使 用 GUIDS 替代 。 

废除 plaintext 元 素 ， 使 用 “text/plian”MIME 类 型 替代 。 


新 增 的 属性 和 废除 的 属性 
在 HTML 5 中 ， 在 新 增加 和 废除 很 多 元 素 的 同时 ， 也 增加 和 废除 了 很 多 属性 。 
23.4.1 新 增 的 属性 
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四 


表单 新 增 相关 属性 

对 input (type=text) 、select、textarea 与 button 指定 autofocus 属性 。 它 以 指定 属性 的 
方式 让 元 素 在 画面 打开 时 自动 获得 焦点 。 

对 input (type=text) 、textarea 指定 placeholder 属性 ， 它 会 对 用 户 的 输入 进行 提示 ， 
提示 用 户 可 以 输入 的 内 容 。 

对 input、output、 select、 textarea、 button 与 fieldset 指定 form 属性 。 它 声明 属于 哪个 表单 ， 
然后 将 其 放置 在 页 面 的 任何 位 置 ， 而 不 是 表单 之 内 。 

对 input (type=text) 、textarea 指定 required 属性 。 该 属性 表示 用 户 提交 时 进行 检查 ， 
检查 该 元 素 内 必定 要 有 输入 内 容 。 

为 input 标签 增加 几 个 新 的 属性 : autocomplete、min、max、mnultiple、pattem 与 
step。 还 有 list 属性 与 datalist 元 素 配合 使 用 ; datalist 元 素 与 autocomplete 属性 配合 使 
用 ; multiple 属性 允许 上 传 时 一 次 上 传 多 个 文件 ; pattern 属性 用 于 验证 输入 字段 的 模式 ， 
其 实 就 是 正则 表达 式 ，step 属性 规定 输入 字段 的 合法 数字 间隔 (假如 step="3"， 则 合 
法 数字 应 该 是 -3、0、3、6， 以 此 类 推 ) ，step 属性 可 以 与 max 及 min 属性 配合 使 用 ， 
以 创建 合法 值 的 范围 。 

为 input、button 元 素 增 加 formaction、formenctype、formmethod、formnovalidate 与 
formtarget 属性 。 用 户 重 载 form 元 素 的 action、enctype、method、novalidate 与 target 属 性 。 
为 fieldset 元 素 增加 disabled 属性 ， 可 以 把 它 的 子 元 素 设 为 disabled 状态 。 

为 input、button、form 增加 novalidate 属性 ， 可 以 取消 提交 时 进行 的 有 关 检查 ， 表 单 
可 以 被 无 条 件 地 提交 。 


.链接 相关 属性 


为 a、area 增加 media 属性 。 规 定 目 标 URL 是 为 哪些 类 型 的 媒介 /设备 进行 优化 的 。 
该 属性 用 于 规定 目标 URL 是 为 特殊 设备 (如 iPhone) 、 语 音 或 打印 媒介 设计 的 。 该 
属性 可 接受 多 个 值 ， 只 能 在 href 属性 存在 时 使 用 。 

为 area 增加 herflang 和 rel 属性 。hreflang 属性 规定 在 被 链接 文档 中 的 文本 的 语言 。 只 
有 设置 了 href 属性 ， 才 能 使 用 该 属性 。rel 属性 规定 当前 文档 与 被 链接 文档 / 资源 之 间 
的 关系 。 只 有 使 用 href 属性 ， 才 能 使 用 rel 属性 。 


。 为 link 增加 size 属性 。sizes 属性 规定 被 链接 资源 的 尺寸 。 只 有 当 被 链接 资源 是 图 标 时 
(rel="icon")， 才 能 使 用 该 属性 。 该 属性 可 接受 多 个 值 ， 值 由 空格 分 隔 。 

。 ”为 base 元素 增加 target 属性 ， 主 要 是 保持 与 a 元 素 的 一 致 性 。 

3. 其 他 属性 

。 为 ol 增加 reversed 属性 ， 它 指定 列表 倒序 显示 。 

。 为 meta 增加 charset 属性 ， 规 定 在 外 部 脚本 文件 中 使 用 的 字符 编码 。 

。 为 menu 增加 type 和 label 属性 。label 为 菜单 定义 一 个 课件 的 标注 ，type 属性 让 菜单 
可 以 以 上 下 文 菜单 、 工 具 条 与 列表 菜单 3 种 形式 出 现 。 

。 为 style 增加 scoped 属性 。 它 允许 我 们 为 文档 的 指定 部 分 定义 样式 ， 而 不 是 整个 文档 。 
如 果 使 用 "scoped" 属性 , 那么 所 规定 的 样式 只 能 应 用 到 style 元 素 的 父 元 素 及 其 子 元 素 。 

。 为 script 增 减 属性 ， 它 定义 脚本 是 否 异步 执行 。async 属性 仅 适 用 于 外 部 脚本 〈 只 有 在 
使 用 src 属性 时 ) ， 有 多 种 执行 外 部 脚本 的 方法 。 

。 为 HIML 元 素 增加 manifest 属性 ， 开 发 离线 Web 应 用 程序 时 它 与 API 结合 使 用 ， 定 
义 一 个 URL， 在 这 个 URL 上 描述 文档 的 缓存 信息 。 

。 为 iframe 增加 3 个 属性 : sandbox、seamless、srcdoc。 用 来 提高 页 面 安全 性 ， 防 止 不 
信任 的 Web 页 面 执 行 某 些 操作 。 


23.4.2 ”废除 的 属性 


HTML 4 中 的 一 些 属性 在 HTML 5 中 不 再 被 使 用 ,而 是 采用 其 他 属性 或 其 他 方式 进行 替代 ， 
如 表 23-1 所 示 。 


表 23-1 HTML 4 中 的 属性 在 HTML 5 中 的 替代 方案 
HTML 4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 的 替代 方案 


[shape coords [a | 使 用 are 元 素 代 禁 a 元 素 


使 用 a 元 素 链接 到 较 长 描述 


version 多 余 属性 ， 被 省 略 

name img id 

scheme meta 只 为 某 个 表单 域 使 用 scheme 

archive、chlassid、codebose、 dbiect 使 用 data 与 type 属性 类 调用 插件 。 需 要 使 用 这 

codetype、declare、standby 1 些 属 性 来 设置 参数 时 ， 使 用 param 属性 

i pe i es 不 声明 之 的 MIME 
使 用 以 明确 简洁 的 文字 开头 、 后 跟 详 述 文字 的 

axis、abbr td、 也 形式 。 可 以 对 更 详细 的 内 容 使 用 tile 属性 ， 来 
使 单元 格 的 内 容 变 得 简短 


caption、 input、 legend、 
align div、hl、h2、h3、h4、 | 使 用 CSS 样式 表 替 代 
hs、h6、P 


HTML 4 中 使 用 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 的 替代 方案 


alink、 link、 text、vlink、backeround、 
bo body CSS 样式 表 替 代 


align、bgcolor、border、cellpadding、 本 
cellspacing、frame、mles、width CSS 样式 表 蔡 代 


aligsn、char、charoff、height、nowrap、 
valign 


alien、bgcolor、char、charoff、height、 _ 
nowrap、 valien、width » CSS 样式 表 蔡 代 


ien、bgcolor、char、charoff、valien 
align、 char、 charoff、valign、width |col、 colgroup CSS 样式 表 蔡 代 
align、border、hspace、vspace object CSS 样式 表 替 代 
clear 使 用 CSS 样式 表 替 代 
compace、 type 、ul、 li CSS 样式 表 替 代 


tbody、thead、tfoot CSS 样式 表 替 代 


[ia cs | 
[amv lm ss 
[TEST TE TT 


i frameborder、scrolling、 
| marginwidth 使 用 CSS 样式 表 蔡 代 


本 章 主 要 讲述 了 HTML 5、HTML 5 与 HIML 4 的 区 别 ， 以 及 HIML 5 新 增 的 元 素 和 
废除 的 元 素 与 新 增 的 属性 和 废除 的 属性 。 随 着 HTML 5 的 迅猛 发 展 ， 各 大 浏览 器 开发 公司 
如 Google、 微 软 、 苹 果 和 Opera 的 浏览 器 开发 业务 都 变 得 异常 繁忙 。 在 这 种 局 势 下 ， 学 习 
HTML 5 无 疑 成 为 Web 开发 者 的 一 大 重要 任务 ， 谁 先 学 会 HTML 5， 谁 就 掌握 了 迈 向 未 来 Web 
平台 的 一 把 钥匙 。 
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第 24 章 HTML 5 的 结构 


本 章 导读 


在 HTML 5 的 新 特性 中 ， 新 增 的 结构 元 素 的 主要 功能 就 是 解决 之 前 在 HTML 4 中 Div“ 漫 
天 飞舞 ”的 情况 ， 增 强 网 页 内 容 的 语义 性 ， 这 对 搜索 引擎 而 言 ， 将 可 以 更 好 地 识别 和 组 织 索引 


内 容 。 合 理 地 使 用 这 种 结构 元 素 ， 将 极 大 地 提高 搜索 结果 的 准确 度 和 体验 。 新 增 的 结构 元 素 ， 
从 代码 上 看 ， 很 容易 看 出 主要 是 消除 Div， 即 增强 语义 ， 强 调 HTML 的 语义 化 。 


技术 要 点 
倒 ”新 增 的 主体 结构 元 素 令 ”HTML5 多 媒体 应 用 
令 ”新 增 的 非 主 体 结构 元 素 令 HTML5 Canvas 画布 


新 增 的 主体 结构 元 素 


在 HTML 5 中 ， 为 了 使 文档 的 结构 更 加 清晰 明确 ， 容 易 阅 读 ， 增 加 了 很 多 新 的 结构 元 素 ， 
如 页 眉 、 页 脚 、 内 容 区 块 等 结构 元 素 。 
24.1.1 article 元 素 
在 HTML 5 中 可 以 灵活 使 用 article 元 素 。article 元 素 可 以 包含 独立 的 内 容 项 ， 所 以 可 以 包 
-个 论坛 帖子 、 一 篇 杂志 文章 、 一 篇 博客 文章 、 用 户 评论 等 。 这 个 元 素 可 以 将 信息 各 部 分 进 
任意 分 组 ， 而 不 需要 考虑 信息 原来 的 性 质 。 
作为 文档 的 独立 部 分 ， 每 一 个 article 元 素 的 内 容 都 具有 独立 的 结构 。 为 了 定义 这 个 结构 ， 
可 以 利用 前 面 介绍 的 <header> 和 <footer> 标签 的 丰富 功能 。 它 们 不 仅 能 够 用 在 正文 中 ， 也 能 
够 用 于 文档 的 各 个 节 中 。 
下 面 以 一 篇 文章 讲述 article 元 素 的 使 用 ， 具 体 代 码 如 下 : 
<article> 
<header> 
<h1> 携 一 段 思念 ， 品 一 缕 闲 悉 </h1> 
<p> 发 表 日 期 : <time pubdate="pubdate">2014/05/09</time></p> 
</header> 
<p> 秋 的 夜晚 ， 薄 凉 ， 远 方 ， 有 若隐若现 的 灯火 ， 迷 离 了 尘世 的 梦 ， 也 迷离 了 我 的 梦 。 宝 贝 ， 我 对 
你 的 思念 未 曾 断 过 ,每 一 夜 都 会 带 你 入 梦 : 宝贝 , 今生 ， 如 果 我 们 之 间 有 一 首 歌 , 我 想 ， 那 应 该 是 未 央 歌 :宝贝 ， 
如 果 我 们 之 间 有 一 段 情 ， 我 想 ， 那 应 该 是 不 了 情 。</p> 
<footer> 
<p><small> 版 权 所 有 @ 温 思 美文 。</small></p> 


</footer> 
</article> 


在 header 元 素 中 嵌入 了 文章 的 标题 部 分 ， 在 hl 元 素 中 是 文章 的 标题 “不 能 改变 世界 ， 就 
要 改变 自己 去 适应 环境 ”, 文章 的 发 表 日 期 在 p 元素 中 。 在 标题 下 部 的 p 元 素 中 是 文章 的 正文 ， 


这 吕 


在 结尾 处 的 footer 元 素 中 是 文章 的 版 权 。 对 这 部 分 内 容 使 用 了 article 元 素 。 在 浏览 器 中 的 效果 
如 图 24-1 所 示 。 


而 “生日 ”三 EM CRAN IRM a0 


携 一 段 思念 ， 品 一 缕 闲 悉 


发 表 日 期 20140509 


| 


要， a 宝贝 ， 雪 对 你 的 
之 间 有 一 首 歌 ， 我 恨 ， 盖 应 该 旺 未 央 


图 24-1 article 元 素 应 用 实例 


另外 ，article 元 素 也 可 以 用 来 表示 插件 ， 它 的 作用 是 使 插件 看 起 来 好 像 内 嵌 在 页 面 中 一 样 。 
代码 如 下 : 


<article> 

<hl>article 表示 插件 </h1> 

<object> 

<param name="allowFullScreen" value="true"> 
<embed src="#" width="600" height="395"></embed> 
</object> 

</article> 


一 个 网 页 中 可 能 有 多 个 独立 的 article 元 素 ， 每 一 个 article 元 素 都 允许 有 自己 的 标题 与 脚注 
等 从 属 元 素 ， 并 允许 对 自己 的 从 属 元 素 单独 使 用 样式 。 如 一 个 网 页 中 的 样式 可 能 如 下 所 示 : 


header{ 
display:block; 
color:green; 
text-align:center; 
aritcle header{ 
color:red; 
text-align:left; 


24.1.2 ”section 元 素 


section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。 一 个 section 元 素 通常 由 内 
容 及 其 标题 组 成 。 但 section 元 素 也 并 非 一 个 普通 的 容器 元 素 ， 当 一 个 容器 需要 被 重新 定义 样 
式 或 者 定义 脚本 行为 的 时 候 ， 还 是 推荐 使 用 Div 控制 。 


<Section> 
<hl> 水果 </h1> 
<p> 水 果 是 指 多 汁 且 有 甜 味 的 植物 果实 ， 不 但 含有 丰富 的 营养 且 能 够 帮助 消化 。 水 果 有 降 血压 、 减 
缓 衰老、 减肥 瘦身 、 皮 肤 保养 、 明 目 、 抗 癌 、 降 低 胆固醇 等 保健 作用 . . .</p> 


</section> 
下 面 是 一 个 带 有 section 元 素 的 article 元 素 例 子 。 


<article> 
<h1> 浆果 </h1> 
<p> 多 心 皮 ， 外 果皮 是 一 层 薄 表皮 ， 而 果肉 柔软 多 汁 且 内 无 核 。</p> 
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<section> 
<h2> 柑 果 </h2> 
<p> 多 心 皮 ， 果 壁 富 含 油 胞 ， 果 实 里 面 糯 凑合 丰富 汁液 。</p> 
</section> 
<section> 
<h2> 蛇 果 </h2> 
<p> 果肉 黄白 色 ， 吃 起 来 比较 脆 ， 并 且 果 汁 比较 多 ， 味 道 甜 ， 闻 起 来 芳香 浓郁 ， 品 质 也 是 上 等 。 
蛇 果 不 仅 消 痰 止咳 、 生 津 开胃 、 补 脑 助 血 ， 还 能 够 润 肺 、 悦 心 、 润 肠 、 止 泻 和 抗 癌 等 。</p> 
</section> 
</article> 


从 上 面 的 代码 可 以 看 出 ， 首 页 整体 呈现 的 是 一 段 完整 独立 的 内 容 ， 所 有 我 们 要 用 article 元 
素 包 起 来 ,这 其 中 又 可 分 为 三 段 ,每 一 段 都 有 一 个 独立 的 标题 ,使 用 了 两 个 section 元 素 为 其 分 段 。 


ET TIE 一 EEC 有 
浆果 
多 心 皮 ， 外 果皮 是 一 层 注 表 皮 ， 而 录 内 来 软 多 计 且 内 无 校 - 


中 
果肉 黄白 色 ， 吃 起 来 比较 脐 ， 并 且 果 汗 比较 多 ， 味 道 甜 ; 闻 起 来 芳香 浓 邦 ， 品 质 也 是 上 等 。 
| 蛇 果 不 仅 消 痪 止咳 、 生 津 开 胃 、 补 脑 助 血 ， 还 能 够 润 肺 、 悦 心 、 润 肠 、 止 泻 和 抗 瘤 。 


图 24-2 带 有 section 元 素 的 article 元 素 实 例 


article 元 素 和 section 元 素 有 什么 区 别 呢 ? 在 HIML 5 中 ，article 元 素 可 以 看 成 是 一 种 特 
殊 种 类 的 section 元 素 ， 它 比 section 元 素 更 强调 独立 性 。 即 section 元 素 强调 分 段 或 分 块 ， 而 
article 强调 独立 性 。 如 果 一 块 内 容 相对 来 说 比较 独立 、 完 整 的 时 候 ， 应 该 使 用 article 元 素 ， 但 
是 如 果 想 将 一 块 内 容 分 成 几 段 的 时 候 ， 应 该 使 用 section 元 素 。 


24.1.3 nav 元 素 


nav 元 素 在 HIML 5 中 用 于 包 于 一 个 导航 链接 组 ， 用 于 显 式 地 说 明 这 是 一 个 导航 组 ， 在 同 
一 个 页 面 中 可 以 同时 存在 多 个 nav。 

并 不 是 所 有 的 链接 组 都 要 被 放 进 nav 元 素 ， 只 需要 将 主要 的 、 基 本 的 链接 组 放 进 nav 元 
素 即 可 。 例 如 ， 在 页 脚 中 通常 会 有 一 组 链接 ， 包 括 服务 条 款 、 首 页 、 版 权 声明 等 ， 这 时 使 用 
footer 元 素 是 最 恰当 的 。 

一 直 以 来 ， 习 惯 使 用 形 如 <div id="nav"> 或 <ul id="nav"> 这 样 的 代码 来 编写 页 面 的 导航 ， 
在 HTML 5 中 ， 可 以 直接 将 导航 链接 列表 放 到 <nav> 标签 中 ， 代 码 如 下 : 


<nav> 

<ul> 

<1i><a href="index.html">Home</a></1i> 
<1i><a href="#">About</a></1i> 

<1i><a href="#">Blog</a></1i> 

</ul> 

</nav> 
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导航 ， 顾 名 思 义 ， 就 是 引导 的 路 线 ， 只 要 具有 引导 功能 ， 都 可 以 认为 是 导航 。 既 可 以 在 页 
与 页 之 间 导 航 ， 也 可 以 在 页 内 的 段 与 段 之 间 导 航 。 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 页 面 导航 </title> 
<header> 
<h1> 网 站 页 面 导航 <h1> 
<nav> 
<ul> 
<li><a href="index.html"> 首 页 </a></1i> 
<1li><a href="about .html"> 关 于 我 们 </a></1i> 
<1i><a href="bbs.html"> 论 坛 </a></1i> 
</ul> 
</nav> 
</hl></h1> 
</header> 
<body> 
</body> 
</html> 


这 个 实例 是 页 面 之 间 的 导航 , nav 元 素 中 包含 3 个 用 于 导航 的 超 链 接 , 即 “首页 ”、“ 关 于 我 们 ” 
和 “论坛 ”。 该 导航 可 用 于 全 局 导航 ， 也 可 放 在 某 个 段落 ， 作 为 区 域 导航 。 运 行 代码 ， 效 果 如 
图 24-3 所 示 。 


| 网 站 页 面 导航 


。 首 页 
-fp 


| .EE 


图 24-3 页 面 之 间 导 航 
下 面 的 实例 是 页 内 导航 ， 运 行 代码 ， 效 果 如 图 24-4 所 示 。 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 页 内 导航 </title> 
</head> 
<body> 
<article> 
<h2> 文章 的 标题 </h2> 
<nav> 
<ul> 
<1i><a href="#pl"> 段 一 </a></1i> 
<1i><a href="#p2"> 段 二 </a></1i> 
<li><a href="#p3"> 段 三 </a></1i> 
< 
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</nav> 
<p id=pl> 段 一 </p> 
<p id=p2> 段 二 </p> 
<p id=p3> 段 三 </p> 
</article> 
</body> 
</html> 


FE 
[omrsrsnuasxexesp- cxscnen “上 


恬 ZE TIE 7 一 ”EEC 
文章 的 标题 B 
= 
: 熏 
届 - 
自 = 
县 = | 
图 24-4 页 内 导航 


24.1.4 aside 元 素 
aside 元 素 用 来 表示 当前 页 面 或 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 主要 内 容 
相关 的 引用 、 侧 边栏 、 广 告 、 导 航 条 ， 以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。 


aside 元 素 主要 有 以 下 两 种 使 用 方法 : 
。 包含 在 article 元 素 中 作为 主要 内 容 的 附属 信息 部 分 ， 其 中 的 内 容 可 以 是 与 当前 文章 有 


关 的 参考 资料 、 名 词 解释 等 。 
<article> 
<h1>...</hl> 
<p> .</p> 
<aside>...</aside> 
</article> 


。 在 article 元 素 之 外 使 用 作为 页 面 或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 是 侧 边栏 ， 其 
中 的 内 容 可 以 是 友情 链接 、 文 章 列表 、 广 告 单元 等 。 代 码 如 下 ， 运 行 代码 后 ， 效 果 如 
图 24-5 所 示 。 


FE le 
¢ CE rr Er 辣 辣 5 
文件 月 扎 晤 但。 查 寺 VV) 收 衰 夫 科 。 工 只 宇 寺 (4H) 

公司 新 闻 


， 企业 新 闻 
* 行业 信息 


as 


| 公司 产品 


图 24-5 aside 元 素 实例 


327 


疙 Oo 全 网 页 设计 与 网 站 建设 完全 实战 手册 


<aside> 
<h2> 公司 新 闻 </h2> 
<ul> 

<1i> 企业 新 闻 </1i> 
<1i> 行业 信息 </1i> 
</ul> 

<h2> 公司 产品 </h2> 
<ul> 

<1i> 上 衣 外 套 </1i> 
<1i> 时 尚 鞋子 </1i> 
<1i> 裤子 </1i> 
</ul> 

</aside> 


24.1.5 pubdate 属性 


pubdate 属性 指示 <time> 元 素 中 的 日 期 / 时 间 是 文档 〈 或 最 近 的 前 辈 <article> 元 素 ) 的 发 
布 日 期 。 

语法 : 

<time pubdate="pubdate"> 

下 面 通过 一 个 实例 讲述 ， 代 码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>pubdate 属性 </title> 
</head> 
<body> 
<article> 
<time datetime="2014-09-28" pubdate="pubdate"></time> 
Hello world</article> 
</body> 
</html> 
- er 
OS ET TT EP" "| 台 雪 六 


Er 


Hello world 


24-6 pubdate 属性 


新 增 的 非 主体 结构 元 素 


除了 以 上 几 个 主要 的 结构 元 素 之 外 ，HTML 5 内 还 增加 了 一 些 表示 逻辑 结构 或 附加 信息 的 
非 主体 结构 元 素 。 
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24.2.1 header 元素 


赋值 运算 符 主要 用 来 将 数值 或 表达 式 的 计算 结果 赋予 变量 。 在 Flash 中 经 常 大 量 应 用 赋值 
运算 符 。header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 面 内 
的 一 个 内 容 区 块 的 标题 header 内 也 可 以 包含 其 他 内 容 , 例如 表格 、 表 单 或 相关 的 LOGO 图 片 。 

在 架构 页 面 时 ， 整 个 页 面 的 标题 常 放 在 页 面 的 开头 ，header 标签 一 般 放 在 页 面 的 项 部。 可 
以 用 如 下 所 示 的 形式 书写 页 面 的 标题 : 


<header> 
<h1> 页 面 标题 </h1> 


</header> 


在 一 个 网 页 中 可 以 拥有 多 个 header 元素 , 可 以 为 每 个 内 容 区 块 加 一 个 header 元素, 代码 如 下 : 


<header> 

<h1> 网 页 标题 </h1> 
</header> 
<article> 

<header> 

<hl1> 文章 标题 </h1> 
</header> 
<p> 文章 正文 </p> 


</article> 

在 HTML 5 中 ， 一 个 header 元 素 通 常 包括 至 少 一 个 headering 元 素 (hl 一 h6) ， 也 可 以 包 
括 hgroup、nav 等 元 素 。 

下 面 是 一 个 网 页 中 的 header 元 素 使 用 实例 ， 运 行 代码 后 ， 效 果 如 图 24-7 所 示 。 


<header> 
<hgroup> 
<h1> 情 系 远方 ， 爱 在 梦 中 </h1> 
<p> 坐 在 窗 前 ， 窗 外 漆黑 一 片 ， 一 个 人 的 夜 总 是 这 般 凄 凉 ， 心 里 总 是 会 忍 不 住 牵挂 着 远方 的 你 ， 
我 们 的 故事 ， 如 若 不 曾 美 丽 ， 就 不 会 有 这 么 深 的 遗憾 和 痛楚 。 时 不 时 地 总 会 想起 过 往 那些 琐碎 的 片段 ， 一 直 都 
在 幻想 中 寻求 一 丝 安 暖 ， 我 执 念 着 那 段 与 你 一 起 的 时 光 ， 静 守 一 室 灯光 ， 思 念 着 远方 的 你 。…… </p> 
</hgroup> 
<nav> 
<ul> 
<1i> 励志 文章 </1i> 
<1i> 人 生 哲 理 </1i> 
<1i> 爱情 文章 </1i> 
</ul> 
</nav> 
</header> 


* ECT EE ET 
A RD BEM CE TAM SR 


情 系 远方 ， 爱 在 梦 中 


灶 在 窗 前 ， 窗 外 读 时 一片， 一 个 人 的 夜 总 是 这 秀清 这 是 会 怒 不 广 李 持 车 寺 方 的 你 ， 我 们 
的 效 享 。 如 若 个 痢 美 熏 ， 就 下 想起 过 社 闭 些 开 区 的 片 简 ， 
中 雪 着 于 办 与 你 - , 室 灯 兆 ， 思 地 着 远方 的 


* 局 志文 章 
* 从 生 管理 
委 于 福全 


图 24-7 header 元 素 使 用 实例 
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24.2.2 hgroup 元 素 


hgroup 元 素 是 将 标题 及 其 子 标题 进行 分 组 的 元 素 。hgroup 元 素 通常 会 将 hl ~ h6 元 素 进 
行 分 组 ， 一 个 内 容 区 块 的 标题 及 其 子 标题 算 一 组 。 

通常 ， 如 果 文 章 只 有 一 个 主 标 题 ， 是 不 需要 hgroup 元 素 的。 但 是 ， 如 果 文 章 有 主 标题 ， 
主 标题 下 有 子 标题 , 就 需要 使 用 hgroup 元 素 了 。 如 下 所 示 是 hgroup 元 素 的 实例 代码 , 运行 代码 ， 
效果 如 图 24-8 所 示 。 


<article> 
<header> 
<hgroup> 
<h1> 旅游 </h1> 
<h2> 住宿 条 件 和 推荐 </h2> 
</hgroup> 
<p> 
<time datetime="2013-05-20">2014 年 05 月 20 日 </time></p> 
<p> 说 明 该 次 旅游 所 住宿 酒店 的 价格 、 饮食 、 服 务 等 方面 , 为 后 续 其 他 驴友 提供 参考 。 如 果 值 得 推荐 ， 
可 以 留 下 酒店 (或 家 庭 旅馆 ) 的 联系 方式 。 一 方面 推广 了 优质 的 商家 ， 另 一 方面 也 为 其 他 驴友 提供 了 便利 …… 
</p> 
</header> 
</article> 


如 果 有 标题 和 副标题 ， 或 在 同一 个 <header> 元 素 中 加 入 多 个 五 标题 ， 那 么 就 需要 使 用 
<hgroup> 元 素 。 


本 
旅游 

住宿 条 件 和 推荐 

2014 年 05 月 20 日 


人 饮食 、 服务 等 方面 ， 为 后 续 厂 他 对 太 报 供 参考 。 如 果 信 得 推荐 ， 
| 下 酒店 《或 家 尾 旅 馈 ] 的 联系 方式 。 一 方面 挫 广 了 优质 的 商家 ， 另 一 方面 也 为 其 他 驴友 提供 


图 24-8 hgroup 元 素 应 用 实例 


24.2.3 ”footer 元 素 


footer 通常 包括 其 相关 区 块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。footer 元 
素 和 header 元 素 的 使 用 基本 上 一 样 ， 可 以 在 一 个 页 面 中 使 用 多 次 ， 如 果 在 一 个 区 段 后 面 加 入 
footer 元 素 ， 那 么 它 就 相当 于 该 区 段 的 尾部 了 。 

在 HIML 5 出 现 之 前 ， 通 常 使 用 类 似 下 面 这 样 的 代码 来 写 页 面 的 页 脚 : 


<div id="footer"> 
<ul> 


<1i> 版 权 信 息 </1i> 
<1i> 站 点 地 图 </1i> 
<1i> 联系 方式 </1i> 
</ul> 
<div> 
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在 HIML 5 中 ， 可 以 不 使 用 Div， 而 是 使 用 更 加 语义 化 的 footer 来 写 : 


<footer> 
<ul> 
<1i> 版 权 信息 </1i> 
<1i> 站 点 地 图 </1i> 
<1i> 联系 方式 </1i> 
</ul> 
</footer> 


footer 元 素 既 可 以 用 作 页 面 整体 的 页 脚 ， 也 可 以 作为 一 个 内 容 区 块 的 结尾 ， 例 如 可 以 将 
<footer> 直接 写 在 <section> 或 是 <article> 中 。 
在 article 元 素 中 添加 footer 元 素 : 


<article> 
文章 内 容 
<footer> 
文章 的 脚注 
</footer> 
</article> 


在 section 元 素 中 添加 footer 元 素 : 


<section> 
分 段 内 容 
<footer> 
分 段 内 容 的 脚注 
</footer> 
</section> 


24.2.4 address 元 素 


address 元 素 通常 位 于 文档 的 末尾 ，address 元 素 用 来 在 文档 中 呈现 联系 信息 ， 包 括 文档 创 
建 者 的 名 字 、 站 点 链接 、 电 子 邮 箱 、 真 实地 址 、 电 话 号 码 等 。address 不 只 用 来 呈现 电子 邮箱 
或 真实 地 址 这 样 的 “地 址 ”概念 ， 而 应 该 包括 与 文档 创建 人 相关 的 各 类 联系 方式 。 

下 面 是 address 元 素 的 应 用 实例 ， 代 码 如 下 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>address 元 素 实例 </title> 
</head> 

<body> 

<address> 

<a href="mailto:example@example.com">webmaster</a><br /> 
临沂 网 站 建设 公司 <br /> 
临沂 兰 山区 平安 路 157 号 <br /> 
</address> 

</body> 

</html> 


浏览 器 中 显示 地 址 的 方式 与 其 周围 的 文档 不 同 ， 正 、Firefox 和 Safari 浏览 器 以 斜体 显示 地 
址 ， 如 图 24-9 所 示 。 


图 24-9 address 元 素 应 用 实例 
还 可 以 把 footer 元 素 、time 元 素 与 address 元 素 结合 起 来 使 用 ， 具 体 代码 如 下 : 


<footer> 
<div> 
<address> 
<a title=" 文章 作者 : 李 敏 "> 
李 敏 </a> 
</address> 
发 表 于 <time datetime="2014-05-04">2014 年 05 月 4 日 </time> 
</div> 
</footer> 


在 这 个 实例 中 ， 把 文章 的 作者 信息 放 在 了 address 元 素 中 ， 把 文章 发 表 日 期 放 在 了 time 
元 素 中 ， 把 address 元 素 与 time 元 素 中 的 总 体内 容 作 为 脚注 信息 放 在 了 footer 元 素 中 ， 如 图 
24-10 所 示 。 


图 24-10 footer 元 素 、time 元 素 与 address 元 素 结合 


播放 视频 


HTML 5 可 以 在 不 借助 诸如 Flash Player 等 第 三 方 插件 的 情况 下 ， 直 接 在 你 的 网 页 上 嵌入 
视频 组 件 。 

浏览 器 提供 原生 支持 视频 的 新 能 力 ， 使 得 网 页 开发 人 员 更 易于 在 不 依赖 于 外 置 插 件 有 效 
性 的 情况 下 ， 在 他 们 的 网 站 上 添加 视频 组 件 。 由 于 苹果 公司 现 阶 段 在 iPhone 和 iPad 上 使 用 的 
Flash 技术 的 局 限 性 ， 传 输 HIML 5 视频 的 能 力 就 显得 尤为 重要 了 。 


332 


第 24 章 HTML 5 的 结构 


如 果 使 用 Flash Player 创建 一 个 在 网 站 上 播放 的 简单 的 MP4 视频 ， 可 以 用 下 面 的 代码 : 


<object type="application/x-shockwave-flash" 
data="player.swf?videoUrl=myVideo.mp4&autopPlay=true™ 
height="210" width="300"> 
<param name="movie™ 
value="player .swf?videoUrl=myVideo.mp4g&autoPlay=true"> 
</object> 


如 果 使 用 的 是 HTML 5， 可 以 使 用 以 下 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<video src="Video.mp4" controls autoplay width="300" 
height="210"></video> 
</body> 

</html> 


上 面 的 这 个 HTML 5 实例 是 极端 简化 了 的 ， 但 是 它 所 实现 的 功能 是 一 样 的 ， 预 览 效 果 如 图 
24-11 所 示 。 


ET 


图 24-11 插入 视频 文件 


HTML 5 canvas 画布 


HTML 5 最 伟大 之 处 在 于 引入 了 画布 canvas。canvas 元 素 是 为 了 客户 端点 阵 图 形 而 设 计 的 ， 
它 本 身 没 有 绘图 能 力 ， 但 却 把 一 个 绘图 API 展现 给 客户 端 JavaScript， 以 使 脚本 能 够 把 想 绘制 
的 东西 都 绘制 到 一 块 画布 上 。 canvas 拥 有 多 种 绘制 路 径 、 矩形 、 圆 形 、 字符 , 以 及 添加 图 像 的 方法 。 

canVas 语法 ， 

向 HTML 5 页 面 添 加 canvas 元 素 ， 规 定 元 素 的 id、 宽度 和 高 度 : 

<canvas id="myCanvas" width="200" height="100"></canvas> 

height 属性 : 画布 的 高 度 。 和 一 幅 图 像 一 样 ， 这 个 属性 可 以 指定 为 一 个 整数 像素 值 或 者 是 
窗口 高 度 的 百分比 。 当 这 个 值 改 变 的 时 候 ， 在 该 画布 上 已 经 完成 的 任何 绘图 都 会 擦 除 掉 。 默 认 
值 是 300。 
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width 属性 : 画布 的 宽度 。 和 一 幅 图 像 一 样 ， 这 个 属性 可 以 指定 为 一 个 整数 像素 值 或 者 是 
窗口 宽度 的 百分比 。 当 这 个 值 改变 的 时 候 ， 在 该 画布 上 已 经 完成 的 任何 绘图 都 会 擦 除 掉 。 默 认 
值 是 300。 

下 面 制作 一 个 阴影 效果 ， 代 码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 阴影 效果 </title> 

</head><body> 

<canvas id="canvas" width="480" height="480" style="background-color: 
rgb (222，222，222) "> 您 的 浏览 器 不 支持 canvas 标签 </canvas> 

<br/> 

<button type="button" onclick="drawIt();">Demo</button> 

<button type: utton"” onclick="clearIt ();"> 清除 画布 </button> 

<script type="text/javascript"> 

Var ctx = document .getElementById('canvas') .getContext ('2d'); 

function drawIt() { clearIt (); 

context .shadowOffsetx - 阴影 相对 于 实体 的 水 平 偏 移 值 

context .shadowOffsetY - 阴影 相对 于 实体 的 垂直 偏 移 值 

context.shadowBlur - 阴影 模糊 程度 。 默 认 值 是 0 ， 即 不 模糊 

context .shadowColor - 阴影 的 颜色 

ctx.shadowOffsetXx = 5; 

ctx.shadowOffsetY = 10; 

ctx.shadowBlur = 10; 

ctx.shadowColor = "rgba(0, 0, 255, 0.5)"; 

ctx.beginPath() 7 

ctxearc(l20r L120 T1007 07 Nath-PL * 27 true)s 

ctx.stroke(); 

ctx.fillRect (300, 300, 100, 100); } 

function clearIt() 

{ 

ctx.clearRect (0, 0, 480, 480); 

. 

</script> 

</body> 

</html> 


单 击 “Demo” 按 钮 ， 预 览 效果 如 图 24-12 所 示 。 
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图 24-12 阴影 效果 
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本 章 小 结 

本 章 主要 讲述 了 新 增 的 主体 结构 元 素 、 新 增 的 非 主体 结构 元 素 、 播 放 视频 和 canvas 画布 。 
通过 对 本 章 的 学 习 ， 使 读者 认识 了 新 的 结构 性 标签 的 标准 ， 让 HTML 文档 更 加 清晰 ， 可 阅读 
性 更 强 ， 更 利于 SEO， 也 更 利于 视 障 人 士 阅读 ， 它 通过 一 些 新 标签 、 新 功能 的 开发 ， 解 决 了 三 
大 问题 : 浏览 器 兼容 问题 、 文 档 结构 不 明确 的 问题 ， 以 及 Web 应 用 程序 功能 受 限 等 问题 。 
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本 章 导读 


JavaScript 是 常见 的 脚本 语言 ， 它 可 以 嵌入 到 HTML 中 ， 在 客户 端 执行 ， 是 动态 特效 网 页 
设计 的 最 佳 选择 ， 同 时 也 是 浏览 器 普遍 支持 的 网 页 脚本 语言 。 几 乎 每 个 普通 用 户 的 计算 机 上 都 
存在 JavaScript 程序 的 影子 。JavaScript 几乎 可 以 控制 所 有 常用 的 浏览 器 ， 而 且 JavaScript 是 世 
界 上 最 重要 的 编程 语言 之 一 ， 学 习 Web 技术 必须 学 会 JavaScript。 


会 JavaScript 简介 争 JavaScript 运算 符 
争 ” JavaScript 的 放置 位 置 争 ”Javascript 程序 语句 


JavaScript 简介 


JavaScript 是 一 种 脚本 语言 ， 比 HTML 复杂 。 不 过 即便 不 懂 编 程 ， 也 不 用 担心 ， 因 为 
JavaScript 写 的 程序 都 是 以 源 代码 的 形式 出 现 的 ， 也 就 是 说 在 一 个 网 页 里 看 到 一 段 比较 好 的 
JavaScript 代码 ， 恰 好 也 用 得 上 ， 就 可 以 直接 复制 ， 然 后 放 到 网 页 中 去 。 

25.1.1 JavaScript 的 历史 

JavaScript 是 Netscape 公司 与 Sun 公司 合作 开发 的 。 在 JavaScript 出 现 之 前 ，Web 浏览 器 
不 过 是 一 种 能 够 显示 超 文 本 文档 的 软件 的 基本 部 分 。 而 在 JavaScript 出 现 之 后 ， 网 页 的 内 容 
不 再 局 限于 枯燥 的 文本 ， 它 们 的 可 交互 性 得 到 了 显著 的 改善 。JavaScript 的 第 一 个 版 本 ， 即 
JavaScript 1.0 版 本 ， 出 现在 1995 年 推出 的 Netscape Navigator 2 浏览 器 中 。 

在 JavaScript 1.0 发 布 时 ，Netscape Navigator 主宰 着 浏览 器 市 场 ， 微 软 的 下 浏览 器 则 扮演 
着 追赶 者 的 角色 。 微 软 在 推出 正 3 的 时 候 发 布 了 自己 的 VBScript 语言 并 以 JScript 为 名 发 布 了 
JavaScript 的 一 个 版 本 ， 以 此 很 快 跟 上 了 Netscape 的 步伐 。 

面 对 微 软 公司 的 竞争 ，Netscape 和 Sun 公司 联合 ECMA (欧洲 计算 机 制造 商 协会 ) 对 
JavaScript 语言 进行 了 标准 化 。 其 结果 就 是 ECMAScript 语言 ， 这 使 得 同一 种 语言 又 多 了 一 个 
名 字 。 虽 然 ECMAScript 这 个 名 字 没 有 流行 开 来 ， 但 人 们 现在 谈论 的 JavaScript 实际 上 就 是 
ECMAScript。 

到 了 1996 年 ，JavaScript、ECMAScript、JScript 已 经 站 稳 了 脚跟 。Netscape 和 微软 公司 在 
它们 各 自 的 第 3 版 浏览 器 中 都 不 同 程度 地 提供 了 对 JavaScript 1.1 语言 的 支持 。 

这 里 必须 指出 的 是 ，JavaScript 与 Sun 公司 开发 的 JAVA 程序 语言 没有 任何 联系 。 人 们 最 
初 给 JavaScript 起 的 名 字 是 LiveScript， 后 来 选择 “JavaScript” 作 为 其 正式 名 称 的 原因 ， 大 概 
是 想 让 它 听 起 来 有 系 出 名 门 的 感觉 ， 但 令 人 遗憾 的 是 ， 这 一 选择 反而 更 容易 让 人 们 把 这 两 种 语 
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言 混为一谈 ， 而 这 种 混淆 又 因为 各 种 Web 浏览 器 确实 具备 这 样 或 那样 的 JAVA 客户 端 支持 功 
能 的 事实 被 进一步 放大 和 加 剧 。 事 实 上 ， 虽 然 JAVA 在 理论 上 几乎 可 以 部 署 在 任何 环境 中 ， 但 
JavaScript 却 只 局 限于 Web 浏览 器 。 


25.1.2 Javascript 的 特点 


JavaScript 语言 具有 以 下 特点 : 

。 JavaScript 是 一 种 脚本 编写 语言 , 采用 小 程序 段 的 方式 实现 编程 , 也 是 一 种 解释 性 语言 ， 
提供 了 一 个 简易 的 开发 过 程 。 它 与 HTML 标识 结合 在 一 起 ， 方 便 用 户 的 使 用 操作 。 

。 JavaScript 是 一 种 基于 对 象 的 语言 ， 同 时 也 可 以 看 做 是 一 种 面向 对 象 的 语言 。 这 意味 
着 它 能 运用 自己 已 经 创建 的 对 象 ， 因 此 许多 功能 可 以 来 自 于 脚本 环境 中 对 象 的 方法 与 
脚本 的 相互 作用 。 

。 JavaScript 具有 简单 性 。 首 先 它 是 一 种 基于 JAVA 基本 语句 和 控制 流 之 上 的 简单 而 紧凑 
的 设计 ， 其 次 它 的 变量 类 型 采用 弱 类 型 ， 并 未 使 用 严格 的 数据 类 型 。 

。 JavaScript 是 一 种 安全 性 语言 ， 它 不 允许 访问 本 地 硬盘 ， 并 且 不 能 将 数据 存 入 到 服务 
器 上 ， 不 允许 对 网 络 文档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 
从 而 有 效 地 防止 数据 丢失 。 

。 JavaScript 是 动态 的 , 它 可 以 直接 对 用 户 或 客户 输入 做 出 响应 , 无 须 经 过 Web 服务 程序 。 
它 对 用 户 的 反映 响应 ， 是 以 事件 驱动 的 方式 进行 的 。 所 谓 事件 驱动 ， 就 是 指 在 网 页 中 
执行 了 某 种 操作 所 产生 的 动作 ， 称 为 “事件 ”。 比 如 按 下 鼠标 、 移 动 窗 口 、 选 择 菜单 
等 都 可 以 视 为 事件 。 当 事件 发 生 后 ， 可 能 会 引起 相应 的 事件 响应 。 

。 JavaScript 具有 跨 平台 性 。JavaScript 依赖 于 浏览 器 本 身 ， 与 操作 环境 无 关 ， 只 要 是 能 
运行 浏览 器 的 计算 机 ， 并 支持 JavaScript 的 浏览 器 就 可 以 正确 执行 。 从 而 实现 了 “ 编 
写 一 次 ， 走 遍 天 下 ”的 梦想 。 


JavaScript 的 放置 位 置 


JavaScript 程序 本 身 不 能 独立 存在 ， 它 依附 于 某 个 HIML 页 面 ， 在 浏览 器 端 运行 。 
JavaScript 作为 一 种 脚本 语言 可 以 放 在 HTML 页 面 中 的 任何 位 置 ， 但 是 浏览 器 解释 HTML 时 是 
按 先后 顺序 进行 的 ， 所 以 放 在 前 面 的 程序 会 被 优先 执行 。 


25.2.1 ”<script/> 使 用 方法 


在 HIML 中 输入 JavaScript 时 ， 需 要 使 用 <script> 标签 。 在 <script> 标签 中 ，language 
特性 声明 要 使 用 的 脚本 语言 ，language 特性 一 般 被 设置 为 JavaScript， 不 过 也 可 用 它 声 明 
JavaScript 的 确切 版 本 ， 如 JavaScript 1.3。 例 如 <script> 的 使 用 方法 如 下 : 


<html xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Javascript 语句 </title> 
</head> 
<body> 
<script type="text/javascriptl1.3"> 
Rl 
JavaScript 语句 
--> 
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</script> 
</body> 
</html> 


浏览 器 通常 忽略 未 知 标签 ， 因 此 在 使 用 不 支持 JavaScript 的 浏览 器 阅读 网 页 时 ， JavaScript 
代码 也 会 被 阅读 。 为 了 防止 这 种 情况 的 发 生 ， 通 常 在 脚本 语言 的 第 一 行 输入 “<!--”， 在 最 后 
一 行 输入 “-->” 的 方式 注销 代码 。 为 了 不 给 使 用 不 支持 JavaScript 浏览 器 的 浏览 者 带 来 麻烦 ， 
在 编写 程序 时 ， 务 必 加 上 注释 代码 。 


25.2.2 ”位 于 网 页 之 外 的 单独 脚本 文件 

在 HTML 文件 中 可 以 直接 输入 JavaScript， 还 可 以 将 脚本 文件 保存 在 外 部 ， 通 过 <script> 
中 的 src 属性 指定 URL, 来 调用 外 部 脚本 语言 。 外 部 JavaScript 语言 的 格式 非常 简单 。 事实 上 ， 
它们 只 包含 JavaScript 代码 的 纯 文本 文件 。 在 外 部 文件 中 不 需要 <script/> 标签 ， 引 用 文件 的 
<script/> 标签 出 现在 HTML 页 中 ， 此 时 文件 的 扩展 名 为 “js”。 

<script type="text/javascript" src="URL"></script> 

这 种 方法 在 难以 辨认 脚本 语言 的 源 代 码 ， 或 在 多 个 页 面 中 使 用 相同 脚本 语言 时 尤为 有 效 。 
通过 指定 script 标签 的 sre 属性 ， 就 可 以 使 用 外 部 的 JavaScript 文件 了 。 在 运行 时 ， 这 个 js 文 
件 的 代码 全 部 嵌入 到 包含 它 的 页 面 内 ， 页 面 程序 可 以 自由 使 用 ， 这 样 就 可 以 做 到 代码 的 复 用 。 


25.2.3 ”直接 位 于 事件 处 理 部 分 的 代码 中 
一 些 简 单 的 脚本 可 以 直接 放 在 事件 处 理 部 分 的 代码 中 。 如 下 所 示 直 接 将 JavaScript 代码 加 
入 到 OnClick 事件 中 : 


<input type="button" name="FullScreen"” value=" 全 屏 显示 " 
onClick="window.open (document .location, '‘'big', 'fullscreen=yes')"> 


这 里 ， 使 用 <input/> 标签 创建 一 个 按钮 ， 单 击 它 时 调用 onclick0 方法 。onclick 特性 声明 
一 个 事件 处 理 函 数 ， 即 响应 特定 事件 的 代码 。 


JavaScript 运算 符 


在 定义 完 变量 之 后 ， 就 可 以 对 其 进行 赋值 、 改 变 、 计 算 等 一 系列 操作 ， 这 一 过 程 通常 又 通 
过 表达 式 来 完成 ， 而 表达 式 中 的 一 大 部 分 是 在 做 运算 符 处 理 。 运 算 符 是 用 于 完成 操作 的 一 系列 
符号 。 在 JavaScript 中 ， 运 算 符 包括 算术 运算 符 、 比 较 运算 符 和 逻辑 布尔 运算 符 。 


25.3.1 算术 运算 符 
在 表达 式 中 起 运算 作用 的 符号 称 为 运算 符 。 在 数学 里 ， 算 术 运 算 符 可 以 进行 加 、 减 、 乘 、 


除 和 其 他 数学 运算 ， 如 表 25-1 所 示 。 
表 25-1 算术 运算 符 


描述 
加 
减 
乘 
除 
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25.3.2 ”逻辑 运算 符 
程序 设计 语言 还 包含 一 种 非常 重要 的 运算 一 罗 辑 运算 。 逻 辑 运 算 符 比较 两 个 布尔 值 ( 真 
或 假 ) ， 然 后 返回 一 个 布尔 值 ， 罗 辑 运算 符 如 表 25-2 所 示 。 
表 25-2 逻辑 运算 器 


25.3.3 ”比较 运算 符 
比较 运算 符 是 比较 两 个 操作 数 的 大 、 小 或 相等 的 运算 符 。 比 较 运算 符 的 基本 操作 是 首先 对 
其 操作 数 进行 比较 ,再 返回 一 个 true 或 false 值 ,表示 给 定 关 系 是 否 成 立 ,操作 数 的 类 型 可 以 任意 。 
在 JavaScript 中 的 比较 运算 符 如 表 25-3 所 示 。 
表 25-3 比较 运算 符 
| 


JavaScript 程序 语句 


JavaScript 中 提供 了 多 种 用 于 程序 流程 控制 的 语句 , 这 些 语句 可 以 分 为 选择 和 循环 两 大 类 。 
选择 语句 包括 下、switch 系列 , 循环 语句 包括 while、for 等 。 下面 就 来 讲述 这 些 程序 语句 的 使 用 。 


25.4.1 使 用 If 语句 


让 ..else 语句 是 JavaScript 中 最 基本 的 控制 语句 ， 通 过 它 可 以 改变 语句 的 执行 顺序 
JavaScript 支持 让 条 件 语句 。 在 站 语句 中 将 测试 一 个 条 件 ， 如 果 该 条 件 满足 测试 ， 执 行 相关 的 
JavaScript 编码 。 

基本 语法 : 

if( 条件 ) 

{ 执行 语句 1 

} 


Slse 


{ 执行 语句 2 
} 


语法 说 明 : 

当 表 达 式 的 值 为 rue 时 ， 则 执行 语句 1， 否 则 执行 语句 2。 若 站 后 的 语句 有 多 行 ， 则 必须 
使 用 花 括 号 将 其 括 起 来 。 

实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>if 语句 </title> 

</head> 

<body> 

<h1> 

当前 时 间 : 5 点 

</h1l> 

<script language="javascript"> 
var hours = 57 // 设 定 当前 时 间 
if( hours < 8 ) // 如 果 不 到 8 点 则 执行 以 下 代码 


{ 

alert ( " 当前 时 间 是 ”+ hours + "” 点， 还 没 到 8 点 ， 你 可 以 继续 休息 ! "); 
</script> 
</body> 
</html> 


使 用 var hours = 5 定义 一 个 变量 hours 表示 当前 时 间 ， 其 值 设 定 为 3。 接 着 使 用 一 个 站 语 
句 判断 变量 hours 的 值 是 否 小 于 8， 小 于 8 则 执行 让 块 花 括 号 中 的 语句 ， 即 弹出 一 个 提示 框 显 
示 “ 当 前 时 间 5 点 ， 还 没 到 8 点 ， 你 可 以 继续 休息 ”。 运 行 结果 如 图 25-1 所 示 。 


来 自 网 页 的 消息 人 


和 ss. ane, fmtte 


= 一 ) 


图 25-1 输出 结果 


25.4.2 ”使 用 For 循环 

遇 到 重复 执行 指定 次 数 的 代码 时 ， 使 用 for 循环 比较 合适 。 在 执行 for 循环 体 中 的 语句 前 ， 
有 3 个 语句 将 得 到 执行 ， 这 3 个 语句 的 运行 结果 将 决定 是 否 要 进入 for 循环 体 。 

基本 语法 : 

Er 初始化; 条件 表 达 式 ; 增 量 ) 

语句 集 ; 

1 

语法 说 明 : 
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初始 化 总 是 一 个 赋值 语句 , 它 用 来 给 循环 控制 变量 赋 初 始 值 ;， 条 件 表达 式 是 一 个 关系 表达 
式 , 它 决 定 什么 时 候 退 出 循环 ; 增 量 定义 循环 控制 变量 每 循环 一 次 后 按 什 么 方式 变化 。 这 3 个 
部 分 之 间 用 ";" 分 开 。 

从 一 份 名 单 中 逐一 输入 所 有 的 名 字 ， 范 例 代 码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>For 循环 </title> 

</head> 

<body> 

<p> 单 击 按钮 ， 代 码 块 循环 八 次 : </p> 

<button onclick="myFunction()"> 点 击 这 里 </button> 
<p id="demo"></p> 


<script> 

function myFunction() 
‘ 

Var x=""; 

for (var i=0;i<8;i++) 


{ 
x=x + "循环 次 数 ”+ i + "<br>"; 
document .getElementById ("demo") .innerHTML=x; 
} 
</script> 
</body> 
</html> 


运行 代码 ， 单 击 下 面 的 按钮 ， 将 代码 块 循环 八 次 ， 如 图 25-2 所 示 。 


文件 人 坊 堪 (5) 。 豆 看 M) 必 友 夫人 A】 工具 TT) 帮助 [HH 
单 击 按钮 ， 代 码 块 循环 八 次 


图 25-2 输出 结果 


从 上 面 的 例子 中 ， 可 以 看 到 : 

Statement 1 在 循环 开始 之 前 设置 变量 (var i=0) 。 
Statement 2 定义 循环 运行 的 条 件 (i 必须 小 于 5) 。 
Statement 3 在 每 次 代码 块 已 被 执行 后 增加 一 个 值 Cit+) 。 
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25.4.3 ”使 用 Switch 语句 


当 判 断 条 件 比 较 多 时 ， 为 了 使 程序 更 加 清晰 ， 可 以 使 用 switch 语句 。 使 用 switch 语句 时 ， 
表达 式 的 值 将 与 每 个 case 语句 中 的 常量 做 比较 。 如 果 相 匹配 ， 则 执行 该 case 语句 后 的 代码 ; 
如 果 没 有 一 个 case 的 常量 与 表达 式 的 值 相 匹配 ， 则 执行 default 语句 。 当 然 ，default 语句 是 可 
选 的 。 如 果 没 有 相 匹配 的 case 语句 ， 也 没有 default 语句 ， 则 什么 也 不 执行 。 

基本 语法 : 

Switch (表达 式 ) 

{ 

case 条 件 1: 

语句 块 1 

case 条 件 2: 

语句 块 2 

ee 

语句 块 N 

语法 解释 : 

Switch 语句 通常 使 用 在 有 多 种 出 口 选择 的 分 支 结 构 上 ， 例 如 信号 处 理 中 心 可 以 对 多 个 信号 
进行 响应 ， 针 对 不 同 的 信号 均 有 相应 的 处 理 。 

编写 一 段 程 序 ， 对 所 有 进来 的 人 问好 ， 但 不 在 名 单 之 上 的 人 除外 。 


实例 代码 : 
<script language="javascript"> 
var who = "limin"; // 当前 来 人 是 Jim 
switch( who ) // 使 用 开头 语句 ， 控 制 对 每 个 人 的 问候 


1 
case "Jim": 
alert( "Hello," + who ); 
break; 
case "jam": 
alert( "Hello," + who ); 
break; 
case "Tom": 
alert( "Hello," + who ); 
break; 
default: 
alert( "Nobody~!"); 
} 
</script> 


本 例 第 2 行 设 定 当前 来 人 是 im， 第 3 行使 用 switch 多 路 开关 语句 控制 对 来 人 的 问候 。 当 
来 人 不 是 名 单 上 的 人 员 时 ， 显 示 “Nobody ! ”打开 网 页 文件 运行 程序 ， 其 结果 如 图 25-3 所 示 。 


图 25-3 运行 结果 
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25.4.4 使 用 While 语句 


当 重 复 执行 动作 的 情形 比较 简单 时 ， 就 不 需要 用 for 循环 ， 可 以 使 用 while 循环 代替 。 
While 循环 在 执行 循环 体 前 测试 一 个 条 件 ， 如 果 条 件 成 立 则 进入 循环 体 ， 否 则 跳 到 循环 体 后 的 
第 一 条 语句 。 

基本 语法 : 

while (条件 表达 式 〉{ 

语句 组 ; 


} 

语法 解释 : 

条 件 表达 式 : 必 选 项 ， 以 其 返回 值 作为 进入 循环 体 的 条 件 。 无 论 返 回 什 么 类 型 的 值 ， 都 被 
作为 布尔 型 处 理 ， 为 真 时 进入 循环 体 。 

语句 组 可 选项 ， 由 一 条 或 多 条 语句 组 成 。 

在 while 循环 体重 复 操作 while 的 条 件 表达 ， 使 循环 到 该 语句 时 就 结束 。 

实例 代码 : 


<script language="javascript"> 
var num = 1; 
while( num < 30 ) 
{ 
document .write( num + " " ); 
numt++; 
} 
</script> 


该 代码 第 3 行使 用 num 是 否 小 于 30 来 决定 是 否 进入 循环 体 ， 第 6 行 递增 num， 当 其 值 达 
到 30 后 循环 将 结束 。 运 行 结果 如 图 25-4 所 示 。 


文件 站 ”六 操 E) 豆 看 MV) 忆 吉 夫人 ) 工具 大 二 | 站) 


1234567891011121314151617181920212223242526272829 


图 25-4 使 用 While 语句 


综合 实例 一 制作 倒计时 特效 


倒计时 特效 可 以 让 用 户 明确 知道 到 某 个 日 期 剩余 的 时 间 ， 制 作 倒计时 特效 的 具体 操作 步骤 
如 下 : 


呵 使 用 Dreamweaver CC 打开 网 页 文档 ， 在 <body> 与 </body> 之 间 相 应 的 位 置 输入 以 下 代码 : 


<Script Language="JavaSscript"> 
Var timedate= new Date("October 1,2015"); 
var times=" 元 旦 "; 
Var now = new Date(); 
var date = timedate.getTime() - now.getTime(); 
Var time = Math.floor(date / (1000 * 60 * 60 * 24)); 
if (time >= 0) ; 
document.write(" 现 在 离 2015 年 "ttimes+" 还 有 : <font color=red><b>"+time +"</ 
b></font> 天 "); 
</Script> 


吧 保存 文 要 ， 在 浏览 器 中 浏览 效果 ， 如 图 25-5 所 示 。 


文 作 D。 名 二 日 ， 豆 每 MI。 履 痪 交工 具 [大 了 (HH) 
现在 高 2015 年 元 日 还 有 : 335 天 


图 25-5 倒计时 效果 


本 章 小 结 


本 章 主 要 讲述 了 JavaScript 的 基本 概念 、 基 本 语法 ， 以 及 JavaScript 常见 的 程序 语句 。 通 
过 本 章 的 学 习 ， 读 者 可 以 了 解 什么 是 JavaScript， 以 及 JavaScript 的 基本 使 用 方法 ， 从 而 为 设计 
出 各 种 精美 的 动感 特效 网 页 打下 基础 。 
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第 2 6 章 ” JavaScript 中 的 事件 


当 Web 页 面 中 发 4 
的 单 击 、 鼠 标 经 过 某 个 特定 元 素 或 按 下 键盘 上 的 某 些 按键 , 还 可 能 是 Web 浏览 器 中 发 生 的 事情 ， 


例如 某 个 Web 页 


了 某 些 类 型 的 交互 时 ， 事 件 就 发 生 了 。 事 件 可 能 是 


面 加 载 完 成 ， 或 者 是 用 户 滚动 窗口 或 改变 窗口 大 小 。 


户 在 某 些 内容 上 


令 事件 概述 
令 事件 分 析 


事件 概述 


全 ”其 他 常用 事件 


用 户 可 以 通过 多 种 方式 与 浏览 器 载 入 的 页 面 进行 交互 ， 而 事件 是 交互 的 桥梁 。Web 应 用 程 
序 开发 者 通过 JavaScript 脚本 内 置 的 和 自 定义 的 事件 来 响应 用 户 的 动作 ， 就 可 开发 出 更 有 交互 
性 、 动 态 性 的 页 面 。 
JavaScript 事件 可 以 分 为 下 面 几 种 不 同 的 类 别 。 最 常用 的 类 别 是 鼠标 交互 事件 ， 然 后 是 键 
盘 和 表单 事件 。 
。 鼠标 事件 ， 可 以 利用 鼠标 事件 在 页 面 中 实现 鼠标 移动 、 单 击 时 的 特殊 效果 。 分 为 两 种 ， 
追踪 鼠标 当前 位 置 的 事件 (onmouseover、onmouseout) ; 追踪 鼠标 在 被 单 击 的 事件 
(onmouseup、onmousedown、onclick) 。 
。 键盘 事件 : 负责 追踪 键盘 的 按键 何 时 及 在 何 种 上 下 文中 被 按 下 。 与 鼠标 相似 ，3 个 事 
件 用 来 追踪 键盘 : onkeyup、onkeydown、onkeypress。 
。 UI 事件 ， 用 来 追踪 用 户 何 时 从 页 面 的 一 部 分 转 到 另 一 部 分 。 例 如 ， 使 用 它 能 知道 用 户 
何 时 开始 在 一 个 表单 中 输入 。 用 来 追踪 这 一 点 的 两 个 事件 是 focus 和 blur。 
。 表单 事件 : 直接 与 只 发 生 于 表单 和 表单 输入 元 素 上 的 交互 相关 。submit 事件 用 来 追踪 
表单 何 时 提交 ，change 事件 监视 用 户 向 元 素 的 输入 ; select 事件 当 <select> 元 素 被 更 
新 时 触发 。 
。 ”加 载 和 错误 事件 ， 事件 的 最 后 一 类 与 页 面 本 身 有 关 。 例 如 加 载 页 面 事件 onload、 最 终 
离开 页 面 事件 onunload。 另 外 ， 还 有 JavaScript 错误 使 用 onerror 事件 追踪 。 
9 事件 分 析 


岂 会 有 所 不 同 。 


事件 的 产生 和 响应 ， 都 是 由 浏览 器 来 完成 的 ， 而 不 是 由 HTML 或 JavaScript 来 完成 的 。 使 
HTML 代码 可 以 设置 哪些 元 素 响应 什么 事件 ， 使 
事件 。 然 而 ,不同 的 浏览 器 所 响应 的 事件 有 所 不 同 ， 相 同 的 浏览 器 在 不 同 版 本 中 所 响应 的 事 


JavaScript 可 以 告诉 浏览 器 怎么 处 理 这 些 


sg 


件 


网 页 设计 与 网 站 建设 完全 实战 手册 


26.2.1 onClick 事件 


onClick 单 击 事件 是 常用 的 事件 之 一 ， 此 事件 是 在 一 个 对 象 上 按 下 然后 释放 一 个 鼠标 按钮 


时 发 生 ， 它 也 会 发 生 在 一 个 控件 的 值 改 变 时 。 这 里 的 单 击 是 指 完成 按 下 鼠标 键 并 释放 这 一 个 完 
整 过 程 后 产生 的 事件 。 


下 面 介绍 使 用 单 击 事件 的 语法 格式 。 
基本 语法 : 

onClick= 函数 或 是 处 理 语句 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body><input type="submit" name="submit" value=" 打印 本 页 " 
onClick="javascript:window.print()"> 

</body> 

</html> 


本 段 代 码 运用 onClick 事件 ， 设 置 当 单 击 按钮 时 实现 打印 效果 。 运 行 代码 ， 效 果 如 图 26-1 


和 图 26-2 所 示 。 
阳 友 = 攻 梧 |] 
ER 一 于 | 
BE) 蔚 桥 条 EO 机 
Ms: 打印 到 文件 0) 【 苏 过 页 
舞 ET 
ma 
份 数 忆 ) 
eb) 
[ 1 32 3 
一 一 一 一 一 一 一 一 一 一 一 
昌林 i 
图 26-1 onClick 事件 图 26-2 打印 


26.2.2 ” onchange 事件 


onchange 事件 通常 在 文本 框 或 下 拉 列 表 框 中 激发 。 在 下 拉 列 表 框 中 ， 只 要 修改 了 可 选项 ， 


就 会 激发 onchange 事件 ;在 文本 框 中 ， 只 有 修改 了 文本 框 中 的 文字 并 在 文本 框 失去 焦点 时 才 
会 被 激发 。 
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基本 语法 : 
onchange= 函数 或 是 处 理 语句 
实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title>change 事件 </title> 

</head> 

<body> 

<form name=searchForm action= > 

<tbody> 

<tr> 

<td align=middle width="100%"> 

<input name="textfield" type="text" size="20" onchange=alert (" 输入 搜索 内 容 ") > 
</td> 

RE 

<tr> 

<t align=middle width="100%"> 

<select size=1 name=search> 

<option value=Name selected> 按 名 称 </option > 
<option value=Singer> 按 类 别 </option> 

< option value=Flasher> 按 作者 </option> 
</select> 

<input type="submit" name="Submit2"” value=" 提 交 " /></td> 
</tr> 

</form> 

</body> 

</html> 


本 段 加 粗 代码 在 一 个 文本 框 中 使 用 了 onchange=alert(" 输入 搜索 内 容 ")， 来 显示 表单 内 容 


变化 引起 onchange 事件 执行 处 理 效 果 。 这 里 的 onchange 结果 是 弹出 提示 信息 框 。 运 行 代码 后 


的 效果 如 图 26-3 所 示 。 


大 
| 大 file:///D:/ 网 页 设计 与 驳 汉 渤 设 3 六 -CX 


E -Ox Behe 
文件 站 境 志 E) 王 看 MV 收 荐 去 A) 工具 帮 (H) 


撤 名 你 区 ] [ 玉 关 ] 


BR 
图 26-3 onchange 事件 
26.2.3 onselect 事件 
onSelect 事件 是 指 当 文 本 框 中 的 内 容 被 选中 时 所 发 生 的 事件 。 
基本 语法 : 
onSelect= 处 理 函 数 或 是 处 理 语句 
实例 代码 : 
<script language="javascript"> // 脚本 程序 开始 
function strcon(str) // 连接 字符 串 
{ ”if(str!=" 请 选择 ') // 如 果 选 择 的 是 默认 项 
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forml .text .value=" 您 选择 的 是 : "+str; // 设置 文本 框 提 示 信息 


} 


textarea> 


else // 否则 

{ 

forml .text .value=""; // 设置 文本 框 提示 信息 

}} 
</script> <!-- 脚本 程序 结束 --> 
<form id="forml" name="forml" method="post" action=""> <!-- 表单 --> 
<label> 
<textarea name="text" cols="50" rows="2" onSelect="alert(' 您 想 拷贝 吗 ? ')"></ 
</label> 
<p><label> 


<select name="selectl" onchange="strAdd (this.value)" > 
<option value=" 请 选择 "> 请 选择 </option><option value=" 北京 "> 北京 </option><!-- 
-> 

<option value=" 上 海 "> 上 海 </option> 

<option value=" 南京 "> 南京 </option> 

<option value=" 山东 "> 山东 </option> 

<option value=" 深圳 "> 深圳 </option> 

<!-- 选项 --><!-- 选 项--> 

<option value=" 其 他 "> 其 他 </option> 

</select> 

</label> 

</p><!-- 选 项 --> 


</form> 


本 段 代码 定义 函数 处 理 下 拉 列 表 框 的 选择 事件 ， 当 选择 其 中 的 文本 时 输出 提示 信息 。 运 行 


代码 ， 效 果 如 图 26-4 所 示 。 


让 二 一 一 “ 
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图 26-4 处 理 下 拉 列 表 框 事件 


26.2.4 onfocus 事件 


获得 焦点 事件 〈onfocus) 是 当 某 个 元 素 获 得 焦点 时 触发 事件 处 理 程序 。 失 去 焦点 事件 


《onblur) 是 当前 元 素 失去 焦点 时 触发 事件 处 理 程序 。 在 一 般 情 况 下 ,这 两 个 事件 是 同时 使 用 的 。 
onfocus 事件 即 得 到 焦点 通常 是 指 选中 了 文本 框 等 ， 并 且 可 以 在 其 中 输入 文字 。 


基本 语法 : 
onfocus= 处 理 函 数 或 是 处 理 语句 
实例 代码 : 


在 本 段 代码 中 的 部 分 代码 应 用 了 onfocus 事件 ， 选 择 其 中 的 一 项 ， 弹 出 选择 提示 的 对 话 框 ， 
如 图 26-5 所 示 。 


— = = 


图 26-5 onfocus 事件 
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26.2.5 onLoad 事件 


加 载 事件 (onLoad) 与 卸载 事件 〈onunLoad) 是 两 个 相反 的 事件 。 在 HIML 4.01 中 ， 只 
规定 了 body 元 素 和 frameset 元 素 拥有 加 载 和 外 载 事件 ， 但 是 大 多 浏览 器 都 支持 img 元 素 和 
object 元 素 的 加 载 事 件 。 以 body 元 素 为 例 ， 加 载 事 件 是 指 整个 文档 在 浏览 器 窗口 中 加 载 完 毕 
后 所 激发 的 事件 。 印 载 事 件 是 指 当前 文档 从 浏览 器 窗口 中 印 载 时 所 激发 的 事件 ， 即 关闭 浏览 器 
窗口 或 从 当前 网 页 跳 转 到 其 他 网 页 时 所 激发 的 事件 。 下 面 介绍 onLoad 事件 语法 格式 。 

基本 语法 : 

onLoad= 处 理 函 数 或 是 处 理 语句 

实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>onLoad 事件 </title> 

<script type="text/JavaSscript"> 

5 二 二 

function MM popupMsg (msg) { //v1.0 
alert (msg); 


¥ 

WE 

</script> 

</head> 

<body onLoad="MM_popupMsg (' 欢迎 你 啊 ! ') "> 
</body> 

</html> 


在 代码 中 加 粗 部 分 代码 应 用 了 onLoad 事件 ， 在 浏览 器 中 预览 效果 时 ， 会 自动 弹出 提示 的 
对 话 框 ， 如 图 26-6 所 示 。 


图 26-6 onLoad 事件 


26.2.6 ”鼠标 移动 事件 


鼠标 移动 事件 包括 3 种， 分 别 为 onMouseOver、onMouseOut 和 onMouseMove。 其 中 ， 
onMouseOver 是 当 上 鼠标 移动 到 对 象 上 时 所 激发 的 事件 ，onMouseOnut 是 当 鼠 标 从 对 象 上 移 开 时 
所 激发 的 事件 ，onMouseMove 是 鼠标 在 对 象 上 进行 移动 时 所 激发 的 事件 。 可 以 用 这 3 个 事件 
在 指定 的 对 象 上 移动 鼠标 ， 实 现 其 对 象 的 动态 效果 。 

基本 语法 : 

onMouseOver= 处 理 函数 或 是 处 理 语 名 


onMouseOut= 处 理 函 数 或 是 处 理 语句 
onMousemOve= 处 理 函 数 或 是 处 理 语句 
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实例 代码 : 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>onMouseOver 事件 </title> 
<style type="text/css"> 
= 
#Layerl {position:absolute;width:257px;height:171lpx;z-index:1;visibility: 
hidden;} 
一 -> 
</style> 
<script type="text/Javascript"> 
de 
function MM findobj (n, d) { //v4.01 
Var pi,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames. 
length) { 
d=parent .frames[n.substring (p+1)] .document; n=n.substring(0,p);} 
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d. 
forms[i] [n]; 
for (i=0; Ix&&d.layersg&i<d.layers.length;i++) x=MM findobj (n,d.layers[i]. 
document); 
if(!x && d.getElementById) x=d.getElementById(n); return x; 


} 
function MM showHideLayers() { //v6.0 
Var i,p,v,obj,args=MM showHideLayers.arguments; 
for (i=0; i<(args.length-2); i+=3) if ((obj=MM findobj (args [i] )) !=null) { 
v=args [i+2]; 
if (obj.style) { obj=obj.style; Vv=(v=='show')?'visible': (v=='hide')?'hid 
den':v; } 
obj.visibility=v; } 
} 
> 
</script> 
</head> 
<body> 
<input name="Submit" type="submit™" 
onMouseOver="MM showHideLayers('Layerl','','show')" value=" 显示 图 像 "” /> 
<div id="Layerl"><img src="1.jpg" width="429" height="365" /></div> 
</body> 
</html> 


在 本 段 代 码 中 部 分 代码 应 用 了 
onMouseOver 事件 ， 在 浏览 器 中 预览 效果 ， 
将 光标 移动 到 “显示 图 像 ”按钮 的 上 方 ， 
可 显示 图 像 ， 如 图 26-7 所 示 。 


26.2.7 onBlur 事件 


失去 焦点 事件 正好 与 获得 焦点 事件 相 
对 ， 失 去 焦点 (onBlur) 是 指 将 焦点 从 当 
前 对 象 中 移 开 。 当 text 对 象 、textarea 对 象 
或 select 对 象 不 再 拥有 焦点 而 退 到 后 台 时 ， 


引发 该 事件 。 
图 26-7 onMouseOver 事件 
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实例 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>onBlur 事件 </title> 

<script type="text/Javascript"> 

= 

function MM popupMsg (msg) { //v1.0 
alert (msg); 


} 

WA 

</script> 

</head> 

<body> 

<p> 用 户 注册 : </p> 

<p> 用 户 名 : <input name="textfield" type="text" 
onBlur="MM_popupMsg (' 文档 中 的 "用户 名 " 文本 域 失去 焦点 ! ')"” /> 
</p> 

<p> 密码 : <input name="textfield2" type="text" 
onBlur="MM_popupMsg (' 文档 中 的 " 密码 " 文本 域 失 去 焦点 ! ')" /> 
</p> 

</body> 

</html> 


在 本 段 代码 中 部 分 代码 应 用 了 onBlur 事件 ， 在 浏览 器 中 预览 效果 ， 将 光标 移动 到 任意 一 


个 文本 框 中 ， 再 将 光标 移动 到 其 他 的 位 置 时 ， 就 会 弹出 一 个 提示 对 话 框 ， 说 明 某 个 文本 框 失去 
焦点 ， 如 图 26-8 所 示 。 
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用 户 注册 ， 
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密码 ， 
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图 26-8 onBlur 事件 


其 他 常用 事件 


前 面 讲述 的 事件 都 是 HTML 4.01 中 所 支持 的 标准 事件 。 除 此 之 外 ， 大 多 浏览 器 还 定义 了 


一 些 其 他 事件 ， 这 些 事件 为 开发 者 开发 程序 带 来 了 很 大 的 便利 ， 也 使 程序 更 为 丰富 和 人 性 化 。 
常用 的 其 他 事件 如 表 26-1 所 示 。 
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表 26-1 其 他 常用 事件 

事件 含义 
onabort 当 页 面 上 的 图 片 没完 全 下 载 时 ， 单 击 浏览 器 上 “停止 ”按钮 时 的 事件 
onbeforeunload 当前 页 面 的 内 容 将 要 被 改变 时 触发 此 事件 
onerror 出 现 错误 时 触发 此 事件 
onfinish 当 marquee 元 素 完成 需要 显示 的 内 容 后 触发 此 事件 
onbeforecopy 当 页 面 当前 被 选择 的 内 容 将 要 复制 到 浏览 者 系统 的 剪贴 板 前 触发 此 事件 
onbounce 在 marquee 内 的 内 容 移动 至 marquee 显示 范围 之 外 时 触发 此 事件 
onstart 当 marquee 元 素 开始 显示 内 容 时 触发 此 事件 
onbeforeupdate 当 浏 览 者 粘贴 系统 剪贴 板 中 的 内 容 时 通知 目标 对 象 
onrowenter 当前 数据 源 的 数据 发 生变 化 并 且 有 新 的 有 效 数 据 时 触发 的 事件 
onscroll 浏览 器 的 滚动 条 位 置 发 生变 化 时 触发 此 事件 
onstop 浏览 器 的 停止 按钮 被 按 下 时 触发 此 事件 或 者 正在 下 载 的 文件 被 中 断 


onbeforecut 当 页 面 中 的 一 部 分 或 者 全 部 的 内 容 将 被 移 离 当 前 页 面 剪贴 并 移动 到 浏览 者 的 系统 剪贴 板 
时 触发 此 事件 


onbeforeeditfocus ”| 当前 元 素 将 要 进入 编辑 状态 
onbeforepaste 内 容 将 要 从 浏览 者 的 系统 剪贴 板 粘贴 到 页 面 中 时 触发 此 事件 


oncopy 当 页 面 当前 的 被 选择 内 容 被 复制 后 触发 此 事件 


当 页 面 当 前 的 被 选择 内 容 被 前 切 时 触发 此 事件 


当 对 象 被 鼠标 拖 动 的 对 象 进入 其 容器 范围 内 时 触发 此 事件 


ondragstart 当 某 对 象 将 被 拖 动 时 触发 此 事件 


ondrop 在 一 个 抑 动 过 程 中 ， 释 放 鼠 标 时 触发 此 事件 
onlosecapture 当 元 素 失去 鼠标 移动 所 形成 的 选择 焦点 时 触发 此 事件 
onpaste 当 内 容 被 粘贴 时 触发 此 事件 

onselectstart 当 文 本 内 容 选 择 将 开始 发 生 时 触发 的 事件 
onafterupdate 当 数 据 完成 由 数据 源 到 对 象 的 传送 时 触发 此 事件 
oncellchange 当 数 据 来 源 发 生变 化 时 


ondataavailable 当 数 据 接收 完成 时 触发 事件 

ondatasetchanged 数据 在 数据 源 发 生变 化 时 触发 的 事件 

ondatasetcomplete 当 来 自 数据 源 的 全 部 有 效 数据 读 取 完毕 时 触发 此 事件 

onerrorupdate 当 使 用 onbeforeupdate 事件 触发 取消 了 数据 传送 时 ， 代 替 onafterupdate 事件 
onrowexit 当前 数据 源 的 数据 将 要 发 生变 化 时 触发 的 事件 

onrowsdelete 当前 数据 记录 将 被 删除 时 触发 此 事件 

onrowsinserted 当前 数据 源 将 要 插入 新 数据 记录 时 触发 此 事件 

onafterprint 当 文 档 被 打印 后 触发 此 事件 


BA 
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含义 


onbeforeprint 。 | 当 文档 即将 打印 时 触发 此 事件 
onfilterchange 当 某 个 对 象 的 滤 镜 效果 发 生变 化 时 触发 的 事件 


onhelp 当 浏 览 者 按 下 F1 键 或 者 使 用 浏览 器 的 帮助 选择 时 触发 此 事件 
onpropertychange ”| 当 对 象 的 属性 之 一 发 生变 化 时 触发 此 事件 
onreadystatechange | 当 对 象 的 初始 化 属性 值 发 生变 化 时 触发 此 事件 


综合 实例 一 将 事件 应 用 于 按钮 中 


事件 响应 编程 是 JavaScript 编程 的 主要 方式 ， 在 前 面 介 绍 时 已 经 大 量 使 用 了 事件 处 理 程序 。 
下 面 通 过 一 个 综合 实例 介绍 将 事件 应 用 在 按钮 中 ， 具 体操 作 步 骤 如 下 : 
使 用 Dreamweaver CC 打开 网 页 文档 ， 如 图 26-9 所 示 。 
Dw dan wa sa A pew wo) sO wets enw wa 


noe 
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图 26-9 打开 网 页 文档 
本 打 开 “ 拆 分 ”视图 ， 在 <body> 和 </body> 之 间 相 应 的 位 置 输入 以 下 代码 ， 如 图 26-10 所 示 。 
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图 26-10 输入 代码 
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<form name="buttonForm"> 

<input type="button"” value=" 按 钮 "” name="buttonl"” onclick="alert(' 按钮 被 点 
击 ')"><br> 

</form> 

<script language="Javascript"> 

;4 

function clickbuttonl()1{ 

document .buttonForm.buttonl.click(); 

} 

--> 

</script> 
区 保存 文档 ， 在 浏览 器 中 浏览 效果 ， 如 图 26-11 所 示 。 
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图 26-11 将 事件 应 用 于 按钮 中 的 效果 


本 章 小 结 


事件 是 JavaScript 中 最 吸引 人 的 地 方 ， 因 为 它 提供 了 一 个 平台 ， 让 用 户 不 仅 能 够 浏览 页 面 
中 的 内 容 , 而 且 还 可 以 和 页 面 元 素 进 行 交互 。 但 由 于 事件 的 产生 和 捕捉 都 与 浏览 器 相关 ， 因此， 
不 同 的 浏览 器 所 支持 的 事件 都 有 所 不 同 。HTML 4.01 中 所 规定 的 事件 是 各 大 浏览 器 都 支持 的 事 
件 ， 本 章 里 介绍 了 HTML 标准 中 所 规定 的 几 种 事件 ， 这 几 种 事件 都 是 在 JavaScript 编程 中 常用 
的 事件 ， 希 望 读者 能 熟练 掌握 这 些 事件 。 
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对 象 在 JavaScript 中 无 处 不 在 ，JavaScript 中 的 函数 本 身 就 是 一 个 对 象 ， 而 且 可 以 说 是 最 重 
要 的 对 象 。 之 所 以 称 为 最 重要 的 对 象 ， 因 为 它 可 以 扮演 其 他 语言 中 的 函数 同样 的 角色 ， 可 以 被 
调用 ， 可 以 被 传 入 参数 。 


技术 要 点 
令 什么 是 函数 令 浏览 器 对 象 
争 ”函数 的 定义 令 ”内 置 对 象 


使 ”JavaScript 对 象 的 声明 和 引用 


什么 是 函数 


JavaScript 中 的 函数 是 可 以 完成 某 种 特定 功能 的 一 系列 代码 的 集合 ， 在 函数 被 调用 前 ， 函 
数 体内 的 代码 并 不 执行 , 即 独立 于 主 程序 。 编写 主 程序 时 不 需要 知道 函数 体内 的 代码 如 何 编写 ， 
只 需要 使 用 函数 方法 即 可 。 可 把 程序 中 大 部 分 功能 拆 解 成 一 个 个 的 函数 ,使 程序 代码 结构 清晰 ， 
易于 理解 和 维护 。 函 数 的 代码 执行 结果 不 一 定 是 一 成 不 变 的 ， 可 以 通过 向 函数 传递 参数 ， 以 解 
决 不 同情 况 下 的 问题 ， 函 数 也 可 返回 一 个 值 。 

函数 是 进行 模块 化 程序 设计 的 基础 ， 编 写 复杂 的 应 用 程序 ， 必 须 对 函数 有 更 深入 的 了 解 。 
JavaScript 中 的 函数 不 同 于 其 他 的 语言 ， 每 个 函数 都 是 作为 一 个 对 象 被 维护 和 运行 的 。 通 过 函 
数 对 象 的 性 质 ， 可 以 很 方便 地 将 一 个 函数 赋值 给 一 个 变量 或 者 将 函数 作为 参数 传递 。 在 继续 讲 
述 之 前 ， 先 看 一 下 函数 的 使 用 语法 : 

Eunction funcl (eye 

var func2=functieonta) {eT 


Var func3=function func4(...){...}; 
Var func5=new Eunction () 7 


这 些 都 是 声明 函数 的 正确 语法 。 

可 以 用 function 关键 字 定 义 一 个 函数 ， 并 为 每 个 函数 指定 一 个 函数 名 ， 通 过 函数 名 来 进行 
调用 。 在 JavaScript 解释 执行 时 , 函数 都 被 维护 为 一 个 对 象 , 这 就 是 要 介绍 的 函数 对 象 (Function 
Object) 。 

函数 对 象 与 其 他 用 户 所 定义 的 对 象 有 着 本 质 的 区 别 ， 这 一 类 对 象 被 称 为 内 部 对 象 ， 例 如 日 
期 对 象 (Date) 、 数 组 对 象 〈Array) 、 字 符 串 对 象 String) 等 都 属于 内 部 对 象 。 这 些 内 置 对 
象 的 构造 器 是 由 JavaScript 本 身 所 定义 的 : 通过 执行 new Array0 这 样 的 语句 返回 一 个 对 象 。 
JavaScript 内 部 有 一 套 机 制 来 初始 化 返回 的 对 象 ， 而 不 是 由 用 户 来 指定 对 象 的 构造 方式 。 


函数 的 定义 


使 用 函数 首先 要 学 会 如 何 定义 ，JavaScript 的 函数 属于 Function 对 象 ， 因 此 可 以 使 用 
Function 对 象 的 构造 函数 来 创建 一 个 函数 。 
27.2.1 ”函数 的 普通 定义 方式 
普通 定义 方式 使 用 关键 字 function"， 也 是 最 常用 的 方式 ， 形 式 上 跟 其 他 的 编程 语言 一 样 。 
基本 语法 : 
function 函数 名 (参数 1， 参 数 2，…… 让 
{ [语句 组 ] 


Return [表达 式 ] 
} 


语法 解释 : 
。 ”function: 必 选 项 ， 定 义 函 数 用 的 关键 字 。 


。 函数 名 : 必 选 项 ， 合 法 的 JavaScript 标识 符 。 

。 参数: 可 选项 ,合法 的 JavaScript 标识 符 ， 外 部 的 数据 可 以 通过 参数 传送 到 函数 内 部 。 

。 ”语句 组 : 可 选项 ，JavaScript 程序 语句 ， 当 为 空 时 函数 没有 任何 动作 。 

。 retum:， 可 选项 ， 遇 到 此 指令 函数 执行 结束 并 返回 ， 当 省 略 该 项 时 函数 将 在 右 花 括号 
处 结束 。 

。 ”表达 式 : 可 选项 ， 其 值 作为 函数 返回 值 。 

实例 代码 : 

<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 


<script type="text/javascript"> 
function displaymessage () 


{ 

alert (" 欢迎 你 ! "); 
} 

</script> 

</head> 

<body> 

<form> 

<input type="button" value=" 单 击 我 哦 !" onClick="displaymessage()" /> 
</form> 

</body> 

</html> 


这 段 代码 首先 在 JavaScript 内 建立 一 个 displaymessage() 显示 函数 。 在 正文 文档 中 插入 一 个 
按钮 ， 当 单 击 按钮 时 ， 显 示 “ 欢 迎 你 ! ”运行 代码 ， 在 浏览 器 中 预览 ， 效 果 如 图 27-1 所 示 。 
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图 27-1 函数 的 应 用 


27.2.2 ”函数 的 变量 定义 方式 


在 JavaScript 中 ， 函 数 对 象 对 应 的 类 型 是 Function， 正 如 数组 对 象 对 应 的 类 型 是 Array, 日 
期 对 象 对 应 的 类 型 是 Date 一 样 ， 可 以 通过 new Function0) 来 创建 一 个 函数 对 象 。 

基本 语法 : 

Var 变量 名 =new Function ([ 参数 1， 参 数 2，…… ]， 函 数 体 ) ; 

语法 解释 : 

。 ”变量 名 : 必 选 项 ， 代 表 函 数 名 ， 是 合法 的 JavaScript 标识 符 。 

。 参数; 可 选项 ， 作 为 函数 参数 的 字符 串 ， 必 须 是 合法 的 JavaScript 标识 符 ， 当 函数 没 

有 参数 时 可 以 忽略 此 项 。 

。 ”函数 体 : 可 选项 , 一 个 字符 串 。 相当 于 函数 体内 的 程序 语句 系列 , 各 语句 使 用 分 号 隔 开 。 

用 new Function0 的 形式 来 创建 一 个 函数 不 常见 ， 因 为 一 个 函数 体 通常 会 有 多 条 语句 ， 如 
果 将 它们 以 一 个 字符 串 的 形式 作为 参数 传递 ， 代 码 的 可 读 性 差 。 

实例 代码 : 


<script language="javascript"> 
Var circularityArea = new Function( "r", "return r*r*Math.PI" ); // 创建 一 


个 函数 对 象 
var rCircle = 2; // 给 定 圆 的 半径 
var area = circularityArea(rCircle); // 使 用 求 圆 面积 的 函数 求 面积 
alert( "半径 为 2 的 圆 面积 为 : ”+ area ) 7 // 输出 结果 
</script> 
运行 代码 ， 在 浏览 器 中 预览 ， 效 果 如 图 27-2 所 示 。 
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图 27-2 浮 数 的 应 用 
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该 代码 第 2、3 行使 用 变量 定义 的 方式 定义 一 个 求 圆 面积 的 函数 ， 
8 的 圆 并 求 其 面积 。 


27.2.3 ”函数 的 指针 调用 方式 


eG 
过 
第 27 章 ， JavaScript 中 的 函数 和 对 象 


第 4、5 设 定 一 个 半径 为 


在 前 面 的 代码 中 ， 函 数 的 调用 方式 是 最 常见 的 ， 但 是 JavaScript 中 函数 调用 的 形式 比较 多 ， 


非常 灵活 。 有 一 种 重要 的 ， 在 其 他 语言 中 也 经 常 使 用 的 调用 形式 称 为 


回调 ， 其 机 制 是 通过 指针 


来 调用 函数 。 回 调 函 数 按照 调用 者 的 约定 实现 函数 的 功能 ， 由 调用 者 调用 。 通 常 使 用 在 自己 定 


义 功 能 而 由 第 三 方 去 实现 的 场合 ， 下 面 举例 说 明 。 
实例 代码 : 


<script language="javascript"> 


function SortNumber( obj, func ) // 定义 通用 排序 函数 
{ // 参数 验证 ， 如 果 第 一 个 参数 不 是 数组 或 第 二 个 参数 不 是 函数 则 抛 出 异常 
if( !(obj instanceof Array) || !(func instanceof Function)) 
{ 
var e = new Error(); // 生成 错误 信息 
e.number = 100000; // 定义 错误 号 
e.message = " 参数 无 效 "; // 错误 描述 
throw e; // 抛 出 异常 
} 
Eon nn in on) // 开始 排序 


{ 


for( m in obj ) 


{ if( func( obj[n], obj[m] ) ) // 使 用 回调 函数 排序 ， 规 则 由 用 户 设 定 


人 
var tmp = obj[n]; 
obj[n] = obj[m]; 
obj [m] = tmp; 


} 


return obj; // 返回 排序 后 的 数组 
} 
function greatThan( argl, arg2 ) // 回调 函数 ， 用 户 定义 的 排序 规则 
{ return argl < arg2; // 规则 :从 大 到 小 


} 
try 


{ var numAry = new Array( 55,4,32,12,22,36,43,86 ); // 生成 一 个 数组 
document .write ("<1i> 排序 前 : "+numAry); // 输出 排序 前 的 数据 
SortNumber( numAry, greatThan ) // 调用 排序 函数 
document .write ("<1i> 排序 后 : "+numAry); // 输出 排序 后 的 数组 


} 
catch (e) 


{ alert( e.number+": "+e.message ); // 异常 处 理 


} 
</script> 


这 段 代码 演示 了 回调 函数 的 使 用 方法 。 首先 定义 一 个 通用 排序 函数 SortNumber( obj, func )， 
其 本 身 不 定义 排序 规则 ， 规 则 交 由 第 三 方 函数 实现 。 接 着 定义 一 个 greatThan( argl, arg2 ) 函数 ， 


其 内 创建 一 个 以 小 到 大 为 关系 的 规则 。document.write("<li> 排序 前 : 


"+numAry) 输出 未 排序 的 


数组 。 接 着 调用 SortNumber( numAry, greatThan ) 函数 排序 。 运 行 代码 ， 在 浏览 器 中 预览 ， 效 


果 如 图 27-3 所 示 。 


数 的 指针 调用 方式 - Windows 


FE- 加 rmzae 司 3|x| 巴 纵 
文件 ”编辑 加 ”查看 如 ”收藏 天 和 工具) 天 助 WD 


宣 收 京 天 其 函数 的 指针 调用 方式 


排序 前 : 9, 4, 12, 52, 2, 56, 73, 86 
排序 后 ; 2, 4, 9, 12, 52, 56, 73, 86 


图 27-3 函数 的 指针 调用 方式 


JavaScript 对 象 的 声明 和 引用 


对 象 可 以 是 一 段 文字 、 一 幅 图 片 、 一 个 表单 Form) 等 。 每 个 对 象 有 它 自己 的 属性 、 方 法 


和 事件 。 对 象 的 属性 是 反映 该 对 象 某 些 特定 的 性 质 的 ， 例 如 字符 串 的 长 度 、 图 像 的 长 宽 、 文 字 


框 号 


的 文字 等 ; 对 象 的 方法 能 对 该 对 象 做 一 些 事情 , 例如 表单 的 “提交 ”(Submit)、 窗 口 的 “ 滚 


动 ”(Scrolling) 等 ， 而 对 象 的 事件 能 响应 发 生 在 对 象 上 的 事情 ， 例 如 提交 表单 产生 表单 的 “ 提 
交 事 件 ”， 单 击 超 链接 产生 的 “ 单 击 事件 ”。 不 是 所 有 的 对 象 都 有 以 上 3 个 性 质 ， 有 些 没有 事 


件 ， 


有 些 只 有 属性 。 


27.3.1 ”声明 和 实例 化 


JavaScript 中 的 对 象 是 由 属性 〈properties) 和 方法 (methods) 两 个 基本 元 素 构成 的 。 前 者 


是 对 象 在 实施 其 所 需要 行为 的 过 程 中 ， 实 现 信息 的 装载 单位 ， 从 而 与 变量 相关 联 ， 后 者 是 指 对 


象 人 


址 ) 


E 够 按照 设计 者 的 意图 而 被 执行 ， 从 而 与 特定 的 函数 相 联 。 
例如 , 要 创建 一 个 student (学 生 ) 对 象 , 每 个 对 象 又 有 以 下 属性 : name (姓名 )、address (地 


、phone (电话) 。 则 在 JavaScript 中 可 使 用 自 定义 对 象 ， 下 面 分 步 讲 解 。 
国 首先 定义 一 个 函数 来 构造 新 的 对 象 student， 这 个 函数 成 为 对 象 的 构造 函数 。 
function student (name,address,phone) // 定义 构造 函数 
[i 
this.name=name; // 初始 化 姓名 属性 
this.address=address; // 初始 化 地 址 属性 
this.phone=phone; // 初始 化 电话 属性 


02 在 student 对 象 中 定义 一 个 printstudent 方法 ， 用 于 输出 学 生 信息 。 


Function printstudent () // 创建 printstudent 函数 的 定义 
{ 
linel="Name:"+this.namet+"<br>\n"; // 读 取 name 信息 
line2="Address:"+this.address+"<br>\n"; // 读 取 address 信息 
line3="Phone:"+this.phone+"<br>\n" // 读 取 phone 信息 
document .writeln (linel,line?2,1ine3); // 输出 学 生 信息 


03 修改 student 对 象 ， 在 student 对 象 中 添加 printstudent 函数 的 引用 。 
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function student (name,address,phone) // 构造 函数 

{ 
this.name=name; // 初始 化 姓名 属性 
this.address=address; // 初始 化 地 址 属性 
this.phone=phone; // 初始 化 电话 属性 
this.printstudent=printstudent; // 创建 printstudent 函数 的 定义 


} 
吗 即 实例 化 一 个 student 对 象 并 使 用 。 
Tom=new student (" 李霞 "," 平安 路 56 号 ", "010-1238678"; // 创建 李霞 的 信息 


Tom.printstudent () // 输出 学 生 信息 

上 面 分 步 讲 解 是 为 了 更 好 地 说 明 一 个 对 象 的 创建 过 程 ， 但 真正 的 应 用 开发 则 一 气 呵 成 ， 灵 
活 设 计 。 

实例 代码 ; 


<script language="javascript"> 
function student (name,address,phone) 


{ 
this.name=name; // 初始 化 学 生 信 息 
this.address=address; 
this.phone=phone; 
this.printstudent=function () // 创建 printstudent 函数 的 定义 
1 
linel=" 姓名 :"+this.name+"<br>\n"; // 输出 学 生 信息 
line2=" 地 址 :"+this.address+"<br>\n"; 
line3=" 电话 :"+this.phone+"<br>\n" 
document .writeln(linel,line?2,1ine3); 
} 
} 
Tom=new student (" 李霞 ", "平安 路 56 号 ", "010-1238678"); // 创建 李霞 的 信息 
Tom.printstudent () // 输出 学 生 信息 


</script> 

该 代码 是 声明 和 实例 化 一 个 对 象 的 过 程 。 首 先 使 用 function student() 定义 了 一 个 对 象 类 构 
造 函 数 student， 包 含 3 种 信息 ， 即 3 个 属性 : 姓名 、 地 址 和 电话 。 最 后 两 行 创建 一 个 学 生 对 象 
并 输出 其 中 的 信息 。this 关键 字 表示 当前 对 象 即 由 函数 创建 的 那个 对 象 。 运 行 代码 ， 在 浏览 器 
中 预览 ， 效 果 如 图 27-4 所 示 。 
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姓名 地 填 
地 址 平安 路 536 号 
电话 :010-1238678 


图 27-4 实例 效果 
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27.3.2 ”对 象 的 引用 


JavaScript 为 我 们 提供 了 一 些 非 常 有 用 的 常用 内 部 对 象 和 方法 。 用 户 不 需要 用 脚本 来 实现 
这 些 功能 。 这 正 是 基于 对 象 编程 的 真正 目的 。 

对 象 的 引用 其 实 就 是 对 象 的 地 址 ， 通 过 这 个 地 址 可 以 找到 对 象 的 所 在 。 对 象 的 来 源 有 如 下 
3 种 方式 ， 通 过 取得 它 的 引用 即 可 对 它 进行 操作 ， 例 如 调用 对 象 的 方法 或 读 取 或 设置 对 象 的 属 
性 等 。 

。 引用 JavaScript 内 部 对 象 。 

。 在 浏览 器 环境 中 提供 。 

。 创建 新 对 象 。 

这 就 是 说 一 个 对 象 在 被 引用 之 前 ， 这 个 对 象 必须 存在 ， 否 则 引用 将 毫 无 意义 ， 从 而 出 现 错 
误 信 息 。 从 上 面 中 我 们 可 以 看 出 JavaScript 引用 对 象 可 通过 3 种 方式 获取 。 要 么 创建 新 的 对 象 ， 
要 么 利用 现存 的 对 象 。 


实例 代码 : 
<script language="javascript"> 

var date; // 声明 变量 

date=new Date () 7 // 创建 日 期 对 象 
date=date.toLocalestring( ); // 将 日 期 转换 为 本 地 格式 
alert( date ); // 输出 日 期 

</script> 


这 里 变量 date 引用 了 一 个 日 期 对 象 ， 使 用 date=date.toLocaleString( ) 通过 date 变量 调用 日 
期 对 象 的 tolocalestring 方法 ， 将 日 期 信息 以 一 个 字符 串 对 象 的 引用 返回 ， 此 时 date 的 引用 已 经 
发 生 了 改变 ， 指 向 一 个 string 对 象 。 运 行 代码 ， 在 浏览 器 中 预览 ， 效 果 如 图 27-5 所 示 。 
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图 27-5 对 象 的 引用 


浏览 器 对 象 

使 用 浏览 器 的 内 部 对 象 系统 , 可 实现 与 HTML 文档 进行 交互 。 它 的 作用 是 将 相关 元 素 组 织 
包装 起 来 ， 提 供给 程序 设计 人 员 使 用 ， 从 而 减轻 编程 人 员 的 劳动 ， 提 高 设计 Web 页 面 的 能 力 。 
27.4.1 _ Navigator 对象 


Navigator 对 象 包含 的 属性 描述 了 正在 使 用 的 浏览 器 。 可 以 使 用 这 些 属 性 进行 平台 专用 的 配 
置 。 虽 然 这 个 对 象 的 名 称 显而易见 的 是 Netscape 的 Navigator 浏览 器 ， 但 其 他 实现 了 JavaScript 
的 浏览 器 也 支持 这 个 对 象 。 其 常用 的 属性 如 表 27-1 所 示 。 
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表 27-1 Navigator 对 象 的 常用 属性 


说 明 
浏览 器 的 名 称 


appVersion 浏览 器 的 版 本 
appCodeName 浏览 器 的 代码 名 称 
browserLanguage 浏览 器 所 使 用 的 语言 
plugins 可 以 使 用 的 插件 信息 
platform 浏览 器 系统 所 使 用 的 平台 ， 如 win32 等 
cookieEnabled 浏览 器 的 cookie 功能 是 否 打 开 
实例 代码 : 
<!ldoctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title>Navigator 对 象 </title> 
</head> 
<body onload=check () > 
<script language=javascript> 
function check() 
{ 
name=navigator.appName; 
if (name=="Netscape"){ 
document .write(" 您 现在 使 用 的 是 Netscape 网 页 浏览 器 <br>");} 
else if (name=="Microsoft Internet Explorer"){ 
document .write(" 您 现在 使 用 的 是 Microsoft Internet Explorer 网 页 浏览 器 <br>");} 
elsef 
document .write(" 您 现在 使 用 的 是 "+navigator.appName+" 网 页 浏览 器 <br>") 7;} 
} 
</script> 
</body> 
</html> 


这 段 代码 可 以 判断 浏览 器 的 类 型 ， 在 浏览 器 中 预览 ， 效 果 如 图 27-6 所 示 。 


文件 (有 慨 独 (F] 豆 硅 V) 必 训 安 (A) 工 县 Tm 疾风 (H) 


您 现在 使 用 的 是 Microsof Intemet Explorer 网 页 浏览 器 


图 27-6 判断 浏览 器 类 型 


网 页 设计 与 网 站 建设 完全 实战 手册 


27.4.2 window 对象 


window 对 象 处 于 对 象 层 次 的 最 顶端 ， 它 提供 了 处 理 navigator 窗口 的 方法 和 属性 。 
JavaScript 的 输入 可 以 通过 window 对 象 来 实现 。 使 用 window 对 象 产生 用 于 客户 与 页 面 交互 的 
对 话 框 主要 有 3 种 : 警告 框 、 确 认 框 和 提示 框 等 ， 这 3 种 对 话 框 使 用 window 对 象 的 不 同方 法 
产生 ， 功 能 和 应 用 场合 也 不 大 相同 。 
window 对 象 常用 的 方法 主要 如 表 27-2 所 示 。 
表 27-2 window 对 象 常用 的 方法 
方法 方法 的 含义 及 参数 说 明 


E Sm ，3 个 参 i k 


Close0) 关闭 一 个 窗口 


情况 下 显示 的 文字 
将 窗口 移 至 指定 的 位 置 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 打开 浏览 器 窗口 </title> 

<script type="text/Javascript"> 

3 

function MM openBrWindow (theURL,winName, features) { //v2.0 
window.open (theURL,winName, features); 

J 

</script> 

</head> 

<body onLoad="MM openBrWindow('index.htm','','width=800,height=400')"> 

打开 浏览 器 窗口 

</body> 

</html> 
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在 代码 中 应 用 了 windows 对 象 ， 在 浏览 器 中 预览 ， 可 以 弹出 一 个 宽 为 800 像素 、 高 为 400 
像素 的 窗口 ， 如 图 27-7 所 示 。 
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图 27-7 打开 浏览 器 窗口 


27.4.3 ”location 对 象 


location 地 址 对 象 描述 的 是 某 一 个 窗口 对 象 所 打开 的 地 址 。 要 表示 当前 窗口 的 地 址 ， 只 需 
要 使 用 “location” 就 行 了 ; 若 要 表示 某 一 个 窗口 的 地 址 ， 就 使 用 “< 窗口 对 象 >.location”。 
location 对 象 常用 的 属性 如 表 27-3 所 示 。 
表 27-3 常用 的 location 属性 
返回 地 址 的 协议 ， 取 值 为 http:、https:、file: 等 
返回 地 址 的 主机 名 ， 例 如 “http: //www.microsoft.com/china/” 的 地 址 主机 名 为 www.microsoft.com 


返回 地 址 的 端口 号 ， 一 般 http 的 端口 号 是 80 

返回 主机 名 和 端口 号 ， 如 www.a.com:8080 

返回 路 径 名 ， 如 “http: //www.a.com/d/index.html” 的 路 径 为 diindex.html 
leah 如 果 地 址 为 c.html#chapter4， 则 返回 #hapter4; 如 果 地 址 里 没有 “#”， 


search 返回 “?” 及 以 后 的 内 容 ; 如 果 地 址 里 没有 “?”， 则 返回 空 字符 串 
href 返回 整个 地 址 ， 即 返回 在 浏览 器 的 地 址 栏 上 显示 的 内 容 


location 对 象 常用 的 方法 主要 包括 : 

。 reload0: 相当 于 Intermet Explorer 浏览 器 上 的 “刷新 ”功能 。 

。 replace0: 打开 一 个 URL， 并 取代 历史 对 象 中 当前 位 置 的 地 址 。 用 这 个 方法 打开 一 个 
URL 后 ， 单 击 浏览 器 中 的 “后 退 ” 按 钮 将 不 能 返回 到 刚才 的 页 面 。 


27.4.4 ”history 对 象 


history 对 象 用 来 存储 客户 端的 浏览 器 已 经 访问 过 的 网 址 (URL) ， 这 些 信 息 存 储 在 一 个 
history 列表 中 ， 通 过 对 history 对 象 的 引用 ， 可 以 让 客户 端的 浏览 器 返回 到 它 曾经 访问 过 的 网 
页 去 。 其 实 它 的 功能 和 浏览 器 的 工具 栏 上 的 “后 退 ” 和 “前 进 ” 按 钮 是 一 样 的 。 


be © 
Ge 


网 页 设计 与 网 站 建设 完全 实战 手册 


history 对 象 常用 的 方法 主要 包括 : 

。 back0: 后 退 ， 与 单 击 “ 后 退 ” 按 钮 是 等 效 的 。 

。 forward0: 前 进 ， 与 单 击 “ 前 进 ” 按 钮 是 等 效 的 。 
。 go0: 该 方法 用 来 进入 指定 的 页 面 。 

实例 代码 : 


<!dqoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>history 对 象 </title> 
</head> 
<body> 
<p><a href="index.html">history 对 象 </a></p> 
<form name="forml" method="post" action=""> 
<input name=" 按钮 " type="button" onClick="history.back()"” value=" 前 进 "> 
<input type="button" value=" 后 退 " onClick="history.forward()"> 
</form> 
</body> 
</html> 


在 代码 中 加 粗 部 分 代码 应 用 了 history 对 象 ， 在 浏览 器 中 预览 ， 效 果 如 图 27-8 所 示 。 
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图 27-8 history 对 象 


27.4.5 document 对 象 


document 对 象 包括 当前 浏览 器 窗口 或 框架 区 域 中 的 所 有 内 容 , 包含 文本 域 、 按 钮 、 单 选 框 、 
复 选 框 、 下 拉 框 、 图 片 、 超 链接 等 HTML 页 面 可 访问 元 素 ， 但 不 包含 浏览 器 的 菜单 栏 、 工 具 
栏 和 状态 栏 。document 对 象 提供 多 种 方式 获得 HTML 元 素 对 象 的 引用 。JavaScript 的 输出 可 通 
过 document 对 象 实现 。 在 document 中 主要 有 links、anchor 和 form 3 个 最 重要 的 对 象 。 
。 anchor 锚 对 象 : 它 是 指 <a name=...></a> 标记 在 HTML 源码 中 存在 时 产生 的 对 象 ， 它 
包含 着 文档 中 所 有 的 anchor 信息 。 
。 links 链接 对 象 : 是 指 用 <a hre 全 .></a> 标记 链接 一 个 超 文本 或 超 媒体 的 元 素 作 为 一 个 
特定 的 URL。 
。 ”form 窗 体 对 象 : 是 文档 对 象 的 一 个 元 素 ， 它 含有 多 种 格式 的 对 象 储存 信息 ， 使 用 它 可 
以 在 JavaScript 脚本 中 编写 程序 ， 并 可 以 用 来 动态 改变 文档 的 行为 。 
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document 对 象 有 以 下 方法 : 
输出 显示 write0 和 writeln0: 该 方法 主要 用 来 实现 在 Web 页 面 上 显示 输出 信息 。 
实例 代码 : 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>document 对 象 </title> 
<script language=javascript> 
function Links() 
{ 
n=document .Links.length; ”// 获得 链接 个 数 
S=""} 
for (j=0;j<n;j++) 
s=s+document .links[j] .href+"\n"; // 获得 链接 地 址 
二 (Sm 
s==" 没有 任何 链接 " 
else 
alert (S) 
} 
</script> 
</head> 
<body> 
<form> 
<input type="button" value=" 所 有 链接 地 址 " onclick="Links () "><br> 
</form> 
<p><a href="#"> 效 果 1</a><br> 
<a href="#"> 效 果 2</a><br> 
<a href="#"> 效 果 3</a><br> 
<a href="#"> 效 果 4</a><br> 
</p> 
</body> 
</html> 


在 代码 中 加 粗 部 分 代码 应 用 document 对 象 ， 在 浏览 器 中 预览 ， 效 果 如 图 27-9 所 示 。 
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图 27-9 document 对 象 


内 置 对 象 


常见 的 内 置 对 象 包 括 时 间 对 象 Date、 数学 对 象 math、 字符 串 对 象 String、 数组 对 象 Array 等 。 
下 面 就 详细 介绍 这 些 对 象 的 使 用 。 


27.5.1 ”Date 对 象 

时 间 对 象 是 一 个 我 们 经 常 要 用 到 的 对 象 ， 做 时 间 输 出 、 时 间 判 断 等 操作 时 都 与 这 个 对 象 离 
不 开 。Date 对 象 类 型 提供 了 使 用 日 期 和 时 间 的 共用 方法 集合 。 用 户 可 以 利用 Date 对 象 获 取 系 
统 中 的 日 期 和 时 间 并 加 以 使 用 。 

基本 语法 : 

Var myDate=new Date ([arguments]); 

Date 对 象 会 自动 把 当前 日 期 和 时 间 保 存 为 其 初始 值 ， 参 数 的 形式 有 以 下 5 种 : 


new Date ("month dd,yyyy hh:mm:ss"); 
new Date ("month dd,yyyy"); 

new Date (yyyy,mth,dd,hh,mm,ss); 

new Date (YYYYvmthvdd) 7 

new Date (ms) 7 


需要 注意 最 后 一 种 形式 ， 参 数 表示 的 是 需要 创建 的 时 间 和 GMT 时 间 1970 年 1 月 1 日 之 
间 相 差 的 毫秒 数 。 各 种 参数 的 含义 如 下 : 

。 ”month: 用 英文 表示 的 月 份 名 称 ， 从 January 到 December。 

。 mth: 用 整数 表示 的 月 份 ， 从 0 (1 月 ) 到 11 (12 月 ) 。 

。 dd: 表示 一 个 月 中 的 第 几 天 ， 从 1 到 31。 

。 yyyy: 四 位 数 表示 的 年 份 。 

。 hh: 小 时 数 ，0 午夜) 一 23 ( 晚 11 点 ) 。 

。 mm: 分 钟 数 ，0 ~ 59 的 整数 。 

。 ss: 秒 数 ，0 一 59 的 整数 。 

。 ”ms: 毫秒 数 ， 为 大 于 等 于 0 的 整数 。 

下 面 使 用 上 述 参 数 形式 创建 日 期 对 象 。 


new Date("May 12,2007 17:18:32"); 
new Date("May 12,2007"); 

new Date(2007,4,12,17,18,32); 
new Date(2007,4,12); 

new Date(1178899200000); 


如 表 27-4 所 示 列 出 了 Date 对 象 的 常用 方法 。 
表 27-4 Date 对 象 的 常用 方法 


| 返回 年 ， 以 0 开 始 
返回 月 值 ， 以 0 开始 
getDate() 返回 日 期 
getHours0 | 返回 小 时 ， 以 0 开始 
getMinutes() | 返回 分 钟 ， 以 0 开始 
getSeconds() | 返回 秒 ， 以 0 开始 
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方法 


续 表 
描述 


getMilliseconds() 


返回 毫秒 (0 ~ 999) 


getUTCDay0 


依据 国际 时 间 来 得 到 现在 是 星期 几 (0 ~ 6) 


getUTCFullYear0 
getUTCMonth() 


依据 国际 时 间 来 得 到 完整 的 年 份 
依据 国际 时 间 来 得 到 月 份 (0 ~ 11) 


getUTCDate0 


依据 国际 时 间 来 得 到 日 (1~31) 


getUTCHoursO 


国际 时 间 来 得 到 小 时 (0 ~ 23) 


getUTCMinutes() 


依据 国际 时 间 来 返回 分 钟 (0 ~ 59) 


getUTCSeconds() 


依据 国际 时 间 来 返回 秒 (0 ~ 59) 


getUTCMilliseconds() 


依据 国际 时 间 来 返回 毫秒 (0 ~ 999) 


getDayO 


返回 星期 几 ， 值 为 0~6 
返回 从 1970 年 1 月 1 号 0:0:0 到 现在 一 共 花 去 的 毫秒 数 


setUTCDate() 
setUTCMonth() 


toStringO 


设置 年 份 2 位 数 或 4 位 数 
设置 月 份 (0~11) 
设置 日 (1 ~31) 


根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 (1 ~31) 
根据 世界 时 设置 Date 对 象 中 的 月 份 (0~11) 


把 Date 对 象 转换 为 字符 串 


toTimeString() 


把 Date 对 象 的 时 间 部 分 转换 为 字符 串 


toDateStringO 


把 Date 对 象 的 日 期 部 分 转换 为 字符 串 


toGMTString() 


使 用 toUTCString() 方法 代替 


toUTCString() 


根据 世界 时 ， 把 Date 对 象 转换 为 字符 串 


toLocaleString() 
toLocaleTimeString() 


根据 本 地 时 间 格 式 ， 把 Date 对 象 转换 为 字符 串 
根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 


toLocaleDateString() 


根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 


UTCO 


根据 世界 时 返回 1997 年 1 月 1 日 到 指定 日 期 的 毫秒 数 


valueOf() 


实例 代码 : 


<!doctype html> 


<htm1> 
<head> 


返回 Date 对 象 的 原始 值 


<meta charset="utf-8"> 


<title> 无 标题 文档 </title> 

</head> 

<body> 

<script type="text/javascript"> 

<I=s 

now = new Date(); 
if ( now.getYear() >= 2000 ){ document.write(now.getYear()," 年 ") } 
else { document.write (now.getYear()+1900," 年 ") } 
document .write (now.getMonth()+1," 月 ",now.getDate()," 日 "); 
document .write (now.getHours ()," 时 ",now.getMinutes()," 分 "); 
document .write (now.getSeconds ()," 秒 "); 

Wy 

</script> 

</body> 

</html> 


在 浏览 器 中 预览 ， 效 果 如 图 27-10 所 示 。 


XN PHD BEV WR IRM HA 
2014 年 10 月 28 日 15 时 50 分 49 秒 


图 27-10 显示 具体 时 间 
本 实例 创建 了 一 个 now 对 象 ， 从 而 使 用 now = new Date0 从 计算 机 系统 时 间 中 获取 当前 


时 间 ， 并 利用 相应 的 方法 ， 获 取 与 时 间 相关 的 各 种 数值 。getYear(0) 方法 获取 年 份 ，getMonthO 
方法 获取 月 份 ，getDate() 方法 获取 日 期 ，getHours() 方法 获取 小 时 ，getMinutes() 获取 分 钟 ， 
getSeconds() 获取 秒 数 。 


27.5.2 ”数学 对 象 math 


作为 一 门 编程 语言 ， 进 行 数学 计算 是 必 不 可 少 的 。 在 数学 计算 中 经 常会 使 用 到 数学 函数 ， 


如 取 绝 对 值 、 开 方 、 取 整 、 求 三 角 函 数值 等 ， 还 有 一 种 重要 的 函数 是 随机 函数 。JavaScript 将 


所 有 这 些 与 数学 有 关 的 方法 、 常 数 、 三 角 函 数 ， 以 及 随机 数 都 集中 到 一 个 对 象 里 面 


Math 


对 象 。math 对 象 是 JavaScript 中 的 一 个 全 局 对 象 ， 不 需要 由 函数 进行 创建 ， 而 且 只 有 一 个 。 
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基本 语法 : 
math. 属性 
math. 方法 
实例 代码 : 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


第 27 章 JavaScript 中 的 函数 和 对 象 


<title>math 数字 对 象 </title> 


ye 


<script language="JavaScript" type="text/javascript"> 


function roundTmp (zx,y) 

{ 

Var pow=Math.pow(15,y); 
Xx*= pow;x=Math.round (x); 
return x/_pow; 

} 

alert (roundTmp (65.645345654,2)); 
</script> 

</head> 

<body> 

</body> 

</html> 


在 浏览 器 中 预览 ， 效 果 如 图 27-11 所 示 。 


来 自 网 页 的 消息 
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图 27-11 数学 对 象 


math.round(x) 函数 实际 上 等 价 于 math.floor(x+0.5)。 但 round 函数 仅 能 够 将 小 数 四 舍 五 入 


为 整数 ， 而 在 实际 开发 中 ， 经 常 需要 四 舍 五 入 到 指定 位 数 。 
原 有 小 数 扩 到 10 的 指定 次 方 倍数 ， 再 四 舍 五 入 ， 最 后 将 小 数 恢 复 到 原来 的 数量 级 。 代 码 的 最 
后 以 “65.645345654,2” 四 舍 五 入 到 第 2 位 小 数 说 明了 函数 的 执行 ， 输 出 结果 为 “65.67”。 


27.5.3 字符 串 对 象 String 


要 实现 这 个 功能 可 用 如 下 思想 : 将 


String 对 象 是 动态 对 象 ， 需 要 创建 对 象 实例 后 才 可 以 引用 它 的 属性 或 方法 ， 可 以 把 用 单 引 


号 或 双 引 号 括 起 来 的 一 个 字符 串 当做 一 个 字符 串 的 对 象 实例 
字符 串 后 面 加 上 〈.) 去 调用 String 对 象 的 属性 和 方法 。String 类 定义 了 大 量 操作 字符 串 的 方法 ， 
例如 从 字符 串 中 提取 字符 或 子 串 ， 或 者 检索 字符 或 子 串 。 需 要 注意 的 是 ，JavaSeript 的 字符 串 
是 不 可 变 的 ，String 类 定义 的 方法 都 不 能 改变 字符 串 的 内 容 。 


实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>string 字符 串 对 象 String</title> 

</head> 

<body> 

<script type="text/javascript"> 

Var string="I love you ™ 

document .write ("<p> 大 字号 显示 : " + string.big() 


来 看 待 ， 也 就 是 说 可 以 直接 在 某 个 


DY 
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document .write ("<p> 小 字号 显示 : " + string.small() + "</p>") 

document .write ("<p> 粗 体 显示 : " + string.bold() + "</p>") 

document .write ("<p> 斜体 显示 : " + string.italics() + "</p>") 

document .write ("<p> 以 打字 机 文本 显示 字符 串 : " + string.fixed() + "</p>") 

document .write ("<p> 使 用 删除 线 来 显示 字符 串 : " + string.strike() + "</p>") 

document .write ("<p> 使 用 红色 来 显示 字符 串 : " + string-fontcolor ("Red") + "</p>") 

document .write("<p> 使 用 18 号 字 来 显示 字符 串 : " + string.fontsize(18) + "</p>") 

document .write ("<pP> 把 字符 转换 为 小 写 : " + string.toLowerCase() + "</p>") 

document .write ("<p> 把 字符 转换 为 大 写 : ”+ string.toUpperCase() + "</p>") 

document .write ("<p> 显示 为 下 标 : " + string.sub() + "</p>") 

document .write ("<p> 显示 为 上 标 : " + string.sup() + "</p>") 

document .write ("<p> 将 字符 串 显示 为 链接 : " + string.link("http://www.xxx.com") 十 
人 > 

</script> 

</body> 

</html> 


String 对 象 用 于 操纵 和 处 理 文 本 串 ， 可 以 在 程序 中 获得 字符 串 长 度 、 提 取 子 字符 串 ， 以 及 
将 字符 串 转 换 为 大 写 或 小 写字 符 。 这 里 通过 String 的 方法 ， 为 字符 串 添加 了 各 种 各 样 的 样式 。 
如 图 27-12 所 示 。 


ET 


大 宇 旨 显示 Tlove you 
小 字号 显示 : Lowe yon 

准 体 显示 Tlove you 

斜体 显示 : Tiove you 

以 打字 机 文本 显示 字符 果 z lov= you 
使 用 帅 除 线 来 显示 字符 趾 _ Heve-yew 
使 用 红色 来 显示 字符 目 :Tlove you 


ss [|OVE you 
把 字符 转换 为 小 写 ilove you 

把 字符 转换 为 大 写 ILOVE YOU 

显示 为 下 标 
显示 为 上 标 : 
将 字符 串 品 示 为 链接 : love Yeu 


图 27-12 字符 串 对 象 String 


27.5.4 数组 对 象 Array 


在 程序 中 数据 是 存储 在 变量 中 的 ， 但 是 ， 如 果 数 据 量 很 大 ， 比 如 几 百 个 学 生 的 成 绩 ， 此 时 
再 逐个 定义 变量 来 存储 这 些 数据 就 显得 异常 烦琐 ， 如 果 通 过 数组 来 存储 这 些 数据 就 会 使 这 一 过 
程 大 大 简化 。 在 编程 语言 中 ， 数 组 是 专门 用 于 存储 有 序数 列 的 工具 ， 也 是 最 基本 、 最 常用 的 数 
据 结构 之 一 。 在 JavaScript 中 ，Array 对 象 专门 负责 数组 的 定义 和 管理 。 

每 个 数组 都 有 一 定 的 长 度 ， 表 示 其 中 所 包含 的 元 素 个 数 ， 元 素 的 索引 总 是 从 0 开始 ， 并 且 
最 大 值 等 于 数组 长 度 减 1， 本 节 将 分 别 介绍 数组 的 创建 和 使 用 方法 。 

基本 语法 : 

数组 也 是 一 种 对 象 ， 使 用 前 先 创 建 一 个 数组 对 象 。 创 建 数组 对 象 使 用 Array 函数 ， 并 通过 
new 操作 符 来 返回 一 个 数组 对 象 ， 其 调用 方式 有 以 下 3 种 : 
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new Array() 
new Array (len) 
new Array([item0, [item]l, [item2,*…]]] 


语法 解释 : 

其 中 第 1 种 形式 创建 一 个 空 数组 ， 它 的 长 度 为 0; 第 2 种 形式 创建 一 个 长 度 为 len 的 数组 ， 
len 的 数据 类 型 必须 是 数字 ， 否 则 按照 第 3 种 形式 处 理 ; 第 3 种 形式 是 通过 参数 列表 指定 的 元 
素 初始 化 一 个 数组 。 下 面 是 分 别 使 用 上 述 形式 创建 数组 对 象 的 例子 : 


Var objArray=new Array(); // 创建 了 一 个 空 数组 对 象 
Var objArray=new Array (6); // 创建 一 个 数组 对 象 ， 包 括 6 个 元 素 
var objArray=new Array ("x","y","z"); // 以 "x"、"y"、"z"3 个 元 素 初始 化 一 个 数组 对 象 


在 JavaScript 中 ， 不 仅 可 以 通过 调用 Array 函数 创建 数组 ， 而 且 可 以 使 用 方 括号 “[]” 的 语 
法 直接 创造 一 个 数组 ， 它 的 效果 与 上 面 第 3 种 形式 的 效果 相同 ， 都 是 以 一 定 的 数据 列表 来 创建 
一 个 数组 。 这 样 表示 的 数组 称 为 一 个 数组 常量 ， 是 在 JavaScript 1.2 版 本 中 引入 的 。 通 过 这 种 
方式 就 可 以 直接 创建 仅 包含 一 个 数字 类 型 元 素 的 数组 了 。 例 如 下 面 的 代码 ; 


Var objArray=[]; // 创建 了 一 个 空 数组 对 象 
var objArray=[2]; // 创建 了 一 个 仅 包 含 数 字 类 型 元 素 "2" 的 数组 
Var ObjArray=["a", "b","c"]; // 以 "a"、"b"、"c"3 个 元 素 初始 化 一 个 数组 对 象 


实例 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 数组 对 象 Array</title> 
</head> 

<body> 

<script type="text/javascript"> 
function sortNumber (a, b) 

{ 

return a = b 

} 


Var arr = new Rrray(6) 


arr[0] = "67" 
arr[ll = "55” 
arr[2] = "30" 
arrct3 SO 
arr[4] = "100" 


arr[Si = "90” 

document .write(arr + "<br />") 
document .write (arr.sort (sortNumber)) 
</script> 

</body> 

</html> 


本 例 使 用 sort0 方 法 从 数值 上 对 数组 进行 排序 。 原 来 数组 中 的 数字 顺序 是 
“6,5,80,40,1000,100”， 使 用 sort 方法 重新 排序 后 的 顺序 是 “67,55,30,50,100,90”。 最 后 使 用 
document.write 方法 分 别 输出 排序 前 后 的 数字 ， 如 图 27-13 所 示 。 


图 27-13 数组 对 象 Array 


综合 实例 一 “改变 网 页 背景 颜色 


Document 对 象 提供 了 几 个 属性 ， 如 fgColor、bgColor 等 来 设置 Web 页 面 的 显示 颜色 ， 它 


们 一 般 定义 在 <body> 标记 中 ， 在 文档 布局 确定 之 前 完成 设置 。 通 过 改变 这 两 个 属性 的 值 可 以 
改变 网 页 背景 颜色 和 字体 颜色 。 
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实例 代码 ; 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 鼠标 放 上 链接 改变 网 页 背景 颜色 </title> 
<SCRIPT LANGUAGE="JavaScript"> 
function goHist (a) 
,1 
history.go (a); 
</script> 
</head> 
<body> 
<center> 
<h2> 改变 网 页 背景 颜色 </h2> 
<table border=1 borderlight=green style="border-collapse: collapse" 
cellpadding="5" cellspacing="0"> 
<tr><td align=center><a href="#" onMouseOver="document .bgColor='skyblue'"> 
天 空 蓝 </a> 
<a href="#" onMouseOver="document .bgColor='red'"> 大 红色 </a> 
<a href="#"onMouseOver="document .bgColor='#0066CC'"> 清新 蓝 </a> 
</td> 
</tr> 
</table> 
</center> 
</body> 
</html> 


运行 代码 ， 在 浏览 器 中 预览 ， 效 果 如 图 27-14 所 示 。 


filey//DY 同 页 人 二 与 网 站 建 斌 守 主 实 志 手 机 / 效 宁 /后 线 鸡 杂 /27/ 改 朗 到 页。 


图 27-14 改变 网 页 背景 颜色 


本 章 小 结 


JavaScript 可 以 根据 需要 创建 自己 的 对 象 ， 从 而 进一步 扩大 JavaScript 的 应 用 范围 ， 增 强 了 
编写 功能 强大 的 Web 文件 。 另 外 ， 函 数 是 进行 模块 化 程序 设计 的 基础 ， 编 写 复 杂 的 Ajax 应 用 
程序 ， 必 须 对 函数 有 更 深入 的 了 解 。 本 章 主要 讲述 了 JavaScript 中 函数 和 对 象 的 基础 知识 。 
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第 2DB 章 动态 网 站 基础 


动态 页 面 最 主要 的 作用 在 于 能 够 让 用 户 通过 浏览 器 来 访问 、 管 理 和 利用 存储 在 服务 器 上 的 
资源 和 数据 ， 特 别 是 数据 库 中 的 数据 。 本 章 重 点 介绍 动态 网 页 的 工作 原理 和 制作 流程 、 网 站 开 
发 语言 、 拱 建 服务 器 平台 等 内 容 。 


技术 要 点 
全 动态 网 站 原理 全 ”数据库 基 础 
争 在 Dreamweaver 中 编码 全 ”创建 数据 库 连 接 


全 搭建 动态 网 页 平台 


动态 网 站 原理 


网 络 技术 日 新 月 异 ， 许 多 网 页 文件 扩展 名 不 再 只 是 .htm， 还 有 .php、.asp 等 ， 这 些 都 是 采 
用 动态 网 页 技术 制作 出 来 的 。 


28.1.1 什么 是 动态 网 站 

动态 网 站 技术 的 工作 原理 是 : 使 用 不 同 技术 编写 的 动态 页 面 保存 在 Web 服务 器 内 ， 当 客 
户 端 用 户 向 Web 服务 器 发 出 访问 动态 页 面 的 请 求 时 ，Web 服务 器 将 根据 用 户 所 访问 页 面 的 后 
级 名 确定 该 页 面 所 使 用 的 网 络 编程 技术 ， 然 后 把 该 页 面 提 交 给 相应 的 解释 引擎 ， 解 释 引 擎 扫描 
整个 页 面 找到 特定 的 定 界 符 ， 并 执行 位 于 定 界 符 内 的 脚本 代码 ， 以 实现 不 同 的 功能 ， 如 访问 数 
据 库 、 发 送 电子 邮件 、 执 行 算术 或 逻辑 运算 等 ， 最 后 把 执行 结果 返回 Web 服务 器 ， 最终 ，Web 
服务 器 把 解释 引擎 的 执行 结果 连同 页 面 上 的 HTML 内 容 ， 以 及 各 种 客户 端 脚 本 一 同 传送 到 客 
户 端 。 
28.1.2 ”动态 网 站 的 主要 技术 

动态 网 站 的 工作 方式 其 实 很 简单 。 那 么 是 不 是 动态 网 页 的 学 习 和 开发 就 轻松 了 呢 ? 显 然 不 
是 这 样 的 。 要 使 动态 网 站 动 起 来 ， 其 中 会 需要 多 种 技术 进行 支持 。 简 单 地 概括 就 是 : 数据 传输 、 
数据 存储 和 服务 管理 。 

1. 数据 传输 

有 的 读者 可 能 会 想到 ，HTTP 不 是 专门 负责 数据 传输 的 吗 ? 是 的 。 但 是 HTTP 仅 是 一 个 应 
层 的 自然 协议 。 如 何 获取 HTTP 请 求 消息 ? 还 必须 使 用 一 种 技术 来 实现 。 

可 以 选用 一 种 编程 语言 (如 C、Java 等 ) 来 设置 和 接收 HITP 请 求 和 响应 消息 的 构成 ， 但 
是 这 种 过 程 是 非常 费时 、 费 力 且 易 错 的 劳动 ， 对 于 广大 初学 者 来 说 简直 就 是 望 侍 莫 及 。 


如 果 能 够 提供 现成 的 技术 ， 封 装 对 HTTP 
请 求 和 响应 消息 的 控制 ， 即 简化 了 开发 ， 降 低 
了 学 习 的 门槛 。 服 务 器 技术 的 一 个 核心 功能 就 
是 负责 对 HTTP 请 求 和 响应 消息 的 控制 。 例 如 ， 
在 ASP 中 ， 我 们 直接 调用 Request 和 Response 
这 两 个 对 象 ， 然 后 利用 它们 包含 的 属性 和 方法 
就 可 以 完成 HTTP 请 求 和 响应 的 控制 。 在 其 他 
服务 器 技术 中 ， 也 都 提供 了 这 些 基 本 功能 ， 但 
是 所 使 用 的 对 象 和 方法 可 能 略 有 不 同 。 

2. 数据 存储 

数据 传输 是 动态 网 站 的 基础 ， 但 是 如 何 
存储 数据 也 是 动态 网 站 必须 解决 的 核心 技术 
之 一 。 也 许 你 可 能 想到 利用 HITP 协议 实现 
在 不 同 页 面 之 间 传 输 信息 。 但 是 这 仅 解决 了 
信息 传输 的 基本 途经 ， 不 是 最 佳 方式 。 试 想 ， 
在 会 员 管理 网 站 中 ， 为 了 保证 每 一 位 登录 会 
员 都 能 够 通过 每 个 页 面 的 验证 ， 我 们 可 能 需 
要 在 HTTP 中 不 断 附加 每 位 登录 会 员 的 信息 ， 
这 本 身 就 是 一 件 很 麻烦 的 事情 。 如 果 登 录 会 
员 很 多 ， 无 疑 会 增加 HITP 传输 的 负担 ， 甚 
至 造成 网 络 的 堵塞 ， 更 为 要 命 的 是 这 很 容易 
造成 整个 网 络 传输 的 混乱 。 

显然 如 果 使 用 HTTP 来 完成 所 有 信息 的 
共享 和 传输 问题 是 很 不 现实 的 ， 也 是 行 不 通 
的 。 最 理想 的 方法 是 服务 器 能 够 提供 一 种 技 
术 来 存储 不 同类 型 的 数据 。 例 如 ， 根 据 信 息 
的 应 用 范围 可 以 分 为 : 应 用 程序 级 变量 〈 存 
储 的 信息 为 所 有 人 共享 ) 和 会 话 级 变量 〈 存 
储 的 信息 仅 为 某 个 用 户 使 用 ) 。 一 般 服 务 器 


在 Dreamweaver 中 编码 


技术 都 能 够 提供 服务 器 内 存 管理 ， 在 服务 器 
内 存 里 划分 出 不 同 区 域 ， 专 门 负责 存储 不 同 
类 型 的 变量 ， 以 实现 数据 的 共享 和 传递 。 另 
外 ， 一 般 服务 器 技术 都 会 提供 Cookie 技术 ， 
以 便 把 用 户 信息 保存 到 用 户 本 地 的 计算 机 中 ， 
使 用 时 再 随时 从 客户 端 调 出 来 ， 从 而 实现 信 
息 的 长 久保 存 和 再 利用 。 

3. 服务 管理 

解决 动态 网 站 的 数据 传输 和 存储 这 两 个 
基本 问题 ， 动 态 网 站 的 条 件 就 基本 成 立 了 。 
但 是 要 希望 动态 网 站 能 够 稳健 地 运行 ， 还 需 
要 一 套 技术 来 维持 这 种 运行 状态 。 这 套 技术 
就 是 服务 器 管理 ， 实 际 上 这 也 是 服务 器 技术 
中 最 复杂 的 功能 。 

当然 ， 我 们 这 里 所 说 的 服务 器 管理 仅仅 
是 狭义 的 管理 概念 ， 它 仅 包 括 服务 器 参数 设 
置 、 动 态 网 站 环境 设置 ， 以 及 网 站 内 不 同 功 
能 模块 之 间 的 协同 管理 。 例 如 ， 网 站 物理 路 
径 和 相对 路 径 的 管理 、 服 务 器 安全 管理 、 网 
站 默认 值 管理 、 扩 展 功 能 管理 和 辅助 功能 管 
理 ， 以 及 一 些 管理 工具 的 支持 等 。 

如 果 没 有 服务 器 管理 技术 的 支持 ， 整 个 
服务 器 可 能 只 能 运行 一 个 网 站 (或 一 个 Web 
应 用 程序 ) ， 动 态 网 页 也 无 法 准确 定位 自己 
的 位 置 。 整 个 网 站 处 于 一 片 混 乱 的 状态 。 在 
ASP 服务 器 技术 中 ， 我 们 可 以 利用 Server 对 
象 来 管理 各 种 功能 ， 如 网 页 定位 、 环 境 参数 
设置 、 安 装 扩展 插件 等 。 


在 Dreamweaver 中 可 以 处 理 多 种 文件 类 型 ， 包 括 HTML、XML、 层 车 样式 表 (CSS) 、 
JavaScript、VBScript、 无 线 标记 语言 (WML) 、 扩 展 数 据 标记 语言 (EDML ) 、Dreamweaver 


模板 〈.dwt) 和 文本 等 。 
28.2.1 根据 代码 提示 设置 背景 音乐 


通过 代码 提示 ， 可 以 在 “代码 ”视图 中 插入 代码 。 在 输入 某 些 字符 时 ， 将 显示 一 个 列表 ， 
列 出 完成 条 目 所 需要 的 选项 。 下 面 通过 代码 提示 讲述 背景 音乐 的 插入 ， 效 果 如 图 28-1 所 示 ， 


有 具体 操作 步骤 如 下 : 


| 丁 如 果 该 标签 支持 属性 ， 则 按 空 格 键 以 显示 
该 标签 允许 的 属性 下 拉 列 表 ， 从 中 选择 属性 
src， 如 图 28-4 所 示 ， 这 个 属性 用 来 设置 背景 
音乐 文件 的 路 径 。 


图 28-1 背景 音乐 


原始 文件 | 原始 文件 /CH28/28.2.1/index.html 电 ] 
作文 作 > 
最 终 文件 | 最 终 文件 /CH28/28.2.Uindexl.html 图 28.4 选择 属性 sre 


面 打 开 网 页 文档 ， 如 图 28-2 所 示 。 国 按 Enter 键 后 ， 出 现 “浏览” 字样 ， 单 击 
以 弹出 “选择 文件 ”对 话 框 ， 在 对 话 框 中 和 
| 下 择 音乐 文件 ， 如 图 20-5 所 示 。 


图 22-2 打开 网 页 文档 


模 切 换 到 “代码 ”视图 ， 找 到 标签 <body>， 

并 在 其 后 面 输入 “<” 以 显示 标签 列表 ， 输 入 

“<” 时 会 自动 弹出 一 个 列表 框 , 如 图 20-5 所 示 ， 柄 单 击 “ 确 定 ” 按 钮 ， 在 新 插入 的 代码 后 按 

向 下 滚动 该 列表 框 并 双击 插入 bgsound 标签 。 “空格 键 ， 在 属性 下 拉 列 表 中 选择 属性 loop， 
DW zem wan we mA wa mao ono se scma sam 各。 加 如 图 28-6 所 示 。 


der 


图 28-5 “选择 文件 ”对 话 框 


28-3 输入 “<” 
四 NS 图 28-6 选择 属性 loop 
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第 28 章 动态 网 站 基础 


丁 选 中 loop 后 ， 出 现 “-1” 并 选中 。 在 最 后 ， 
的 属性 值 后 ， 为 该 标签 输入 “>”， 如 图 20-7 ， ee E 
所 示 。 保 存 文件 ， 按 F12 键 在 浏览 器 中 预览 ， ec 
就 能 听 到 音乐 了 。 | 一 


[Fs 寺村 


图 28-8 “代码 片断 ” 图 28-9 要 插入 的 代码 
面板 片断 


EA 


图 28-7 设置 属性 loop 


28.2.2 ”使 用 代码 片断 快速 创建 网 页 
插入 代码 片断 的 具体 操作 步骤 如 下 : 

硬 执 行 “窗口 ”| “代码 片断 ”命令 ， 打 开 “ 代 

码 片断 ”面板 ， 如 图 28-8 所 示 。 

本 将 光标 置 于 要 插入 代码 片断 的 位 置 , 在 “ 代 

码 片 断 ” 面 板 中 双击 要 插入 的 代码 片断 ， 单 

击 面板 左下 角 的 “插入 ”按钮 , 如 图 28-9 所 示 。 大 

本 插入 代码 片断 后 ， 在 “代码 ”视图 中 的 代 图 28-10 插入 代码 片断 

码 如 图 28-10 所 示 。 


动态 网 站 技术 类 型 


实际 上 目前 常用 的 3 类 服务 器 技术 就 是 活动 服务 器 网 页 (Active Server Pages，ASP) 、 
Java 服务 器 网 页 (JavaServer Pages，JSP) 、 超 文本 预 处 理 程序 (Hypertext Preprocessor， 
PHP) 。 这 些 技术 的 核心 功能 都 是 相同 的 ， 但 是 它们 基于 的 开发 语言 不 同 ， 实 现 功能 的 途径 也 
存在 差异 。 当 你 掌握 了 一 种 服务 器 技术 后 ， 再 学 习 另 一 种 服务 器 技术 ， 就 会 发 现 简单 多 了 。 这 
些 服务 器 技术 都 可 以 设计 出 常用 动态 网 页 ， 对 于 一 些 特殊 功能 , 不 同 服务 器 技术 支持 程度 不 同 ， 
操作 的 难 易 程 度 也 略 有 差别 ， 甚 至 还 有 些 功 能 必须 借助 各 种 外 部 扩展 才 可 以 实现 。 


28.3.1 ASP 


ASP 是 一 种 服务 器 端 脚本 编写 环境 ， 可 以 用 来 创建 和 运行 动态 网 页 或 Web 应 用 程序 。ASP 
采用 VB Script 和 JavaScript 脚本 语言 作为 开发 语言 ， 当 然 也 可 以 嵌入 其 他 脚本 语言 。ASP 服务 
器 技术 只 能 在 Windows 系统 中 使 用 。 

ASP 网 页 具有 以 下 特点 : 

。 ”利用 ASP 可 以 实现 突破 静态 网 页 的 一 些 功 能 限制 ， 实 现 动态 网 页 技术 。 
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网 页 设计 与 网 站 建设 完全 实战 手册 


。 ASP 文 件 是 包含 在 HIML 代码 所 组 
成 的 文件 中 的 ， 易 于 修改 和 测试 。 

。 服务 器 上 的 ASP 解释 程序 会 在 服务 
器 端 执行 ASP 程序 ， 并 将 结果 以 
HTML 格式 传送 到 客户 端 浏览 器 上 ， 
因此 使 用 各 种 浏览 器 都 可 以 正常 浏览 
ASP 所 产生 的 网 页 。 

。 ”ASP 提供 了 一 些 内 置 对 象 ， 使 用 这 些 
对 象 可 以 使 服务 器 端 脚本 功能 更 强 。 
例如 ， 可 以 从 Web 浏览 器 中 获取 用 
户 通 过 HTML 表单 提交 的 信息 ， 并 
在 脚本 中 对 这 些 信 息 进行 处 理 ， 然 后 
向 Web 浏览 器 发 送信 息 。 

。 ”ASP 可 以 使 用 服务 器 端 ActiveX 组 件 
来 执行 各 种 各 样 的 任务 ， 例 如 存 取 数 
据 库 、 发 送 Email 或 访问 文件 系统 等 。 

。 ”由 于 服务 器 是 将 ASP 程序 执行 的 结 
果 以 HTML 格式 传 回 客户 端 浏览 器 
的 ， 因 此 使 用 者 不 会 看 到 ASP 所 编 
写 的 原始 程序 代码 ， 可 防止 ASP 程 
序 代码 被 窃取 。 

。 方便 连接 ACCESS 与 SQL 数据 库 。 

se。 开发 需要 有 丰富 的 经 验 ， 否 则 会 留 出 
漏洞 ， 被 黑客 利用 进行 注入 攻击 。 


28.3.2. PHP 


PHP 也 是 一 种 比较 流行 的 服务 器 技术 ， 
它 最 大 的 优势 就 是 开放 性 和 免费 服务 。 你 不 
用 花费 一 分 钱 , 就 可 以 从 PHP 官方 站 点 (http:// 
www.php.net) 下 载 PHP 服务 软件 ， 并 不 受 限 
制 地 获得 源码 ， 甚 至 可 以 从 中 加 进 自己 的 功 
能 。PHP 服务 器 技术 能 够 兼容 不 同 的 操作 系 
统 。PHP 页 面 的 扩展 名 为 php。 

PHP 有 以 下 特性 : 

。 开放 的 源 代码 : 所 有 的 PHP 源 代 码 

事实 上 都 可 以 得 到 。 

。 PHP 是 免费 的 : 和 其 他 技术 相 比 ， 

PHP 本 身 免 费 而 且 是 开源 代码 。 
。 PHP 具有 快捷 性 : 程序 开发 快 、 运 行 
快 、 技 术 本 身 学 习 快 。 因 为 PHP 可 
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以 被 嵌入 于 HIML 语言 ， 它 相对 于 
其 他 语言 ， 编 辑 简单 ， 实 用 性 强 ， 更 
适合 初学 者 。 

。 跨 平 台 性 强 : 由 于 PHP 是 运行 在 服 
务 器 端的 脚本 ， 可 以 运行 在 UNIX、 
Linux、Windows 下 。 

。 效率 高 PHP 消耗 相当 少 的 系统 资源 。 

。 图像 处 理 : 用 PHP 动态 创建 图 像 。 

。 面向 对 象 :在 PHP4、PHP5 中， 面 
向 对 象 方面 都 有 了 很 大 的 改进 ， 现 在 
PHP 完 全 可 以 用 来 开发 大 型 商业 程序 。 

。 专业 专注 : PHP 支持 脚本 语言 为 主 ， 
同 为 类 C 语言 。 


28.3.3. JSP 


JSP 是 Sun 公司 倡导 、 许 多 公司 参与 一 
起 建立 的 一 种 动态 网 页 技术 标准 。JSP 可 以 在 
Serverlet 和 JavaBean 技术 的 支持 下 ， 完 成 功能 强 
大 的 Web 应 用 开发 。 另 外 ，JSP 也 是 一 种 跨 多 个 
平台 的 服务 器 技术 ， 几 乎 可 以 执行 于 所 有 平台 。 

JSP 技 术 是 用 JAVA 语言 作为 脚本 语言 的 ， 
JSP 网 页 为 整个 服务 器 端的 Java 库 单 元 提供 
了 一 个 接口 来 服务 于 HTTP 的 应 用 程序 。 

在 传统 的 网 页 HIML 文件 (*htm.*. 
html) 中 加 入 JAVA 程序 片段 和 JSP 标 记 (tag)， 
就 构成 了 JSP 网 页 (*jsp) 。Web 服务 器 在 
遇 到 访问 JSP 网 页 的 请 求 时 ， 首 先 执行 其 中 
的 程序 片段 ， 然 后 将 执行 结果 以 HIML 格式 
返回 给 客户 。 程 序 片 段 可 以 操作 数据 库 、 重 
新 定向 网 页 及 发 送 E-mail 等 ， 这 就 是 建立 动 
态 网 站 所 需要 的 功能 。 

JSP 的 优点 : 

。 对 于 用 户 界面 的 更 新 ， 其 实 就 是 由 

Web Server 进行 的 ， 所 以 给 人 的 感觉 
更 新 很 快 。 

。 ”所 有 的 应 用 都 是 基于 服务 器 的 ， 所 以 

它们 可 以 时 刻 保持 最 新 版 本 。 

。 客户 端的 接口 不 是 很 烦琐 ， 对 于 各 种 

应 用 易于 部 署 、 维 护 和 修改 。 
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28.3.4 ASP、PHP 和 JSP 比较 和 PHP 则 每 次 请 求 者 需要 进行 编译 。 
ASP、PHp 和 JSP 这 三 大 服务 器 技术 具 人 
有 很 多 共同 的 特点 : 一 检 昭 癌 。 
。 都 是 在 HTML 源 代码 中 混合 其 他 及 te et 
泛 。 由 于 JSP 是 一 种 较 新 的 技术 ， 国 
本 语言 或 程序 代码 。 其 中 HIML 源 
内 使 用 较 少 。 但 是 在 国外 ，JSP 已 经 
代码 主要 负责 描述 信息 的 显示 结构 和 ee 
是 比较 流行 的 一 种 技术 ， 尤 其 是 电子 
样式 ， 而 脚本 语言 或 程序 代码 则 用 来 由 
描述 需要 处 理 的 逻辑 。 


程序 代码 都 是 在 服务 器 端 经 过 专门 的 
语言 引擎 解释 执行 之 后 ， 把 执行 结果 
肉 入 到 HTML 文档 中 的 ， 最 后 再 一 
起 发 送 给 客户 端 浏览 器 。 

ASP、PHP 和 JSP 都 是 面向 Web 服 


由 于 免费 的 PHP 缺乏 规模 支持 ， 使 
得 它 不 适合 应 用 于 大 型 电子 商务 站 
点 ， 而 更 适合 一 些小 型 商业 站 点 。 
ASP 和 JSP 则 没有 PHP 的 这 个 缺陷 。 
ASP 可 以 通过 微软 的 COM 技术 获 
得 ActiveX 扩展 支持 ，JSP 可 以 通过 


务 器 的 技术 ， 客 户 端 浏览 器 不 需要 任 
何 附加 的 软件 支持 。 

当然 ， 它 们 也 存在 很 多 不 同 ， 例 如 : 

。 JSP 代 码 被 编译 成 Servlet， 并 由 
JAVA 虚拟 机 解释 执行 ， 这 种 编译 操 
作 仅 在 对 JSP 页 面 的 第 一 次 请 求 时 发 
生 ， 以 后 就 不 再 需要 编译 。 而 ASP 


JAVA Class 和 EJB 获得 扩展 支持 。 同 

时 升级 后 的 ASPNET 更 是 获得 NET 

类 库 的 强大 支持 ， 编 译 方式 也 采用 了 

JSP 的 模式 ， 功 能 可 以 与 JSP 相 抗 衡 。 

总 之 ，ASP、PHP 和 JSP 三 者 都 有 自己 

的 用 户 群 ， 它 们 各 有 所 长 ， 读 者 可 以 根据 三 
者 的 特点 选择 一 种 适合 自己 的 语言 。 


搭建 本 地 服务 器 


要 建立 具有 动态 的 Web 应 用 程序 ， 必 有 需 建立 一 个 Web 服务 器 ， 选 择 一 门 Web 应 用 程序 开 
发 语言 ， 为 了 应 用 得 更 深入 还 需要 选择 一 款 数据 库 管理 软件 。 同 时 ， 因 为 是 在 Dreamweaver 中 
开发 的 ， 还 需要 建立 一 个 Dreamweaver 站 点 ， 该 站 点 能 够 随时 调试 动态 页 面 。 因 此 创建 一 个 这 
样 的 动态 站 点 , 需要 Web 服务 器 +Web 开发 程序 语言 + 数据 库 管理 软件 +Dreamweaver 动 态 站 点 。 


28.4.1 安装 IIs 


互联 网 信息 服务 (Internet Information Server，IIS) 是 一 种 Web 服务 组 件 ， 它 提供 的 服务 
包括 Web 服务 器 、FTP 服务 器 、NNTP 服务 器 和 SMTP 服务 器 ， 这 些 服务 分 别 用 于 网 页 浏览 、 
文件 传输 、 新 闻 服 务 和 邮件 发 送 等 方面 。 使 用 这 个 组 件 提供 的 功能 ， 使 得 在 网 络 〈 包 括 互 联网 
和 局 域 网 ) 上 发 布 信息 成 了 一 件 很 简单 的 事情 。 

安装 IS 的 具体 操作 步骤 如 下 : am 


a 间 SE access 

三 在 Windows 7 系统 下 ， 执 行 “ 开 Ee Om 

给 ”| “ 控 和 面板 |“ 程序 " 命 ，。 富 
弹出 如 图 28-11 所 示 的 页 面 。 os som 间 mammsmesess 


本 弹出 “Windows 功能 ”窗口 ， 可 


以 看 到 有 些 选项 需要 手动 选择 的 ， 图 28-11 打开 或 关闭 Windows 功能 
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选中 需要 安装 的 功能 复 选 框 , 如 图 28-12 所 示 。| 散 = 


Windows 功能 


= 


同 县 Teinet 寿 疡 革 
PR 


图 28-12 “Windows 功能 ”窗口 


葬 单 击 “ 确 定 ”按钮 ， 弹 出 如 图 28-13 所 示 
的 “Microsoft Windows” 提 示 框 。 


Microroft Windows = 


Windows 正在 更 改 功能 ,请 千 候 。 这 可 能 需 
| 要 分钟 


上 上 


图 28-13 提示 框 


三 安 装 完成 后 , 再 次 进入 控制 面板 ”选择 “ 管 
理工 具 ”， 双 击 “Intermet 信息 服务 (IIS) 管 
理 器 ”选项 ， 进 入 IIS 设置 界面 ， 如 图 28-14 
所 示 。 


图 28-14 双击 Internet 信息 服务 (IIS ) 管理 器 


王选 择 “Default Web Site” 选 项 , 并 双击 “ASP” | 
图 标 ， 如 图 28-15 所 示 。 | 
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6rs 7 中 ASP 父 路 径 是 没有 启用 的 ， 要 选择 
“Tme” 选 项 , 才 可 开启 父 路 径 , 如 图 28-16 所 示 。 


ee 


图 28-16 可 开启 父 路 径 
加 单 击 右 侧 的 “高 级 设置 ” 超 链接 ， 弹 出 “高 
级 设置 ”对 话 框 ， 设 置 “物理 路 径 ”， 如 图 
28-17 所 示 。 


图 28-17 设置 “物理 路 径 ” 
艳 单 击 “ 编 辑 网 站 ”下 面 的 “编辑 ”按钮 ， 


弹出 “网 站 绑 定 ”对 话 框 , 单 击 右 侧 的 “编辑 ” 


， 按钮， 设置 网 站 的 端口 ， 如 图 28-18 所 示 。 
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醒 在 打开 的 页 面 中 单 击 右 侧 的 “添加 ” 超 链接 
如 图 28-20 所 示 。 


28.4.2 配置 Web 服务 器 ee = 

加 双击 “Intermet 信 息 服务 (IS) 管理 器 ” 图 28-20 单 击 右 侧 的 “添加 ” 超 链接 

窗口 中 的 “默认 文档 ”图 标 ， 如 图 2 9 醋 弹出 “添加 默认 文档 ”对 话 框 ， 在 “名 称 ” 
ke 9 文本 框 中 输入 名 称 ， 单 击 “ 确 定 ”按钮 即 可 ， 

如 图 28-21 所 示 。 


0 图 28-21 “添加 默认 文档 ”对 话 框 


数据 库 相 关 术 语 


数据 库 是 创建 动态 网 页 的 基础 。 对 于 网 站 来 说 一 般 都 要 准备 一 个 用 于 存储 、 管 理 和 获取 客 
户 信息 的 数据 库 。 利 用 数据 库 制作 的 网 站 ， 一 方面 ， 在 前 台 ， 访 问 者 可 以 利用 查询 功能 很 快 地 
找到 自己 要 的 资料 ， 另 一 方面 , 在 后 台 ， 网 站 管理 者 通过 后 台 管 理 系统 可 能 很 方便 地 管理 网 站 ， 
而 且 后 台 管 理 系统 界面 很 直观 ， 即 使 不 懂 计算 机 的 人 也 很 容易 学 会 使 用 。 


28.5.1 ”什么 是 数据 库 


数据 库 就 是 计算 机 中 用 于 存储 、 处 理 大 量 数据 的 软件 ， 一 些 关 于 某 个 特定 主题 或 目的 的 信 
息 集合 。 数 据 库 系 统 主要 目的 在 于 维护 信息 ， 并 在 必要 时 提供 协助 取得 这 些 信息 。 

互联 网 的 内 容 信息 绝 大 多 数 都 存储 在 数据 库 中 ， 可 以 将 数据 库 看 做 是 一 家 制造 工厂 的 产品 
仓库 ， 专 门 用 于 存放 产品 ， 仓 库 具 有 严格 而 规范 的 管理 制度 ， 入 库 、 出 库 、 清 点 、 维 护 等 日 常 
管理 工作 都 十 分 有 序 ， 而 且 还 以 科学 、 有 效 的 手段 保证 产品 的 安全 。 数 据 库 的 出 现 和 应 用 使 得 
客户 对 网 站 内 容 的 新 建 、 修 改 、 删 除 、 搜 索 变 得 更 为 轻松 、 自 由 、 简 单 和 快捷 。 网 站 的 内 容 既 
繁多 ， 又 复杂 ， 而 且 数量 和 长 度 根本 无 法 统计 ， 所 以 必须 采用 数据 库 来 管理 。 

成 功 的 数据 库 系统 应 具备 以 下 特点 : 

。 功能 强大 。 
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。 ”能 准确 地 表示 业务 数据 。 例如 一 个 有 关 作者 信息 的 名 为 authors 的 表 
。 容易 使 用 和 维护 。 中 ， 每 个 列 包含 的 是 所 有 作者 的 某 个 特定 类 
。 ”对 最 终 用 户 操作 的 响应 时 间 合理 。 型 的 信息 ， 比 如 “姓氏 ”， 而 每 行 则 包含 了 
。 ”便于 数据 库 结构 的 改进 。 某 个 特定 作者 的 所 有 信息 : 姓 、 名 、 住 址 等 。 
。 便于 数据 的 检索 和 修改 。 对 于 特定 的 数据 库 表 ， 列 的 数目 一 般 事 
。” 较 少 的 数据 库 维护 工作 。 先 固定 ， 各 列 之 间 可 以 由 列 名 来 识别 。 而 行 
。 ”有效 的 安全 机 制 能 确保 数据 安全 。 的 数目 可 以 随时 、 动 态 变化 。 
。 ”元 余数 据 最 少 或 不 存在 。 关系 键 是 关系 数据 库 的 重要 组 成 部 分 。 
”便于 数据 的 备份 和 人 恢复。 关系 键 是 一 个 表 中 的 一 个 或 几 个 属性 ， 用 来 
” ”数据库 结 构 对 最 终 用 户 透明 。 标识 该 表 的 每 一 行 或 与 另 一 个 表 产生 联系 。 

28.5.2 ”数据 库 表 主键 ， 又 称 主 码 〈 英 语 : primary key 或 


在 关系 数据 库 中 ， 数 据 库 表 是 一 系列 二 unique key) 。 数 据 库 表 中 对 储存 数据 对 象 予 
维 数组 的 集合 ， 用 来 代表 和 储存 数据 对 象 之 以 唯一 和 完整 标识 的 数据 列 或 属性 的 组 合 。 
间 的 关系 。 它 由 纵向 的 列 和 横向 的 行 组 成 ， “一 个 数据 列 只 能 有 一 个 主键 ， 且 主键 的 取信 

不 能 缺失 ， 即 不 能 为 空 值 (Null) 。 


常见 的 数据 库 管理 系统 


目前 有 许多 数据 库 产 品 ， 如 Microsoft Access、Microsoft SQL Server 和 Oracle 等 产品 各 以 
自己 特有 的 功能 ， 在 数据 库 市 场 上 占有 一 席 之 地 。 下 面 简要 介绍 几 种 常用 的 数据 库 管理 系统 。 

1. Oracle 

Oracle 是 一 个 最 早 商 品 化 的 关系 型 数据 库 管 理 系统 ， 也 是 应 用 广泛 、 功 能 强大 的 数据 库 管 
理 系统 。Oracle 作为 一 个 通用 的 数据 库 管理 系统 ， 不 仅 具 有 完整 的 数据 管理 功能 ， 还 是 一 个 分 
布 式 数据 库 系统 ， 支 持 各 种 分 布 式 功 能 ， 特 别 是 支持 Internet 应 用 。 作 为 一 个 应 用 开发 环境 ， 
Oracle 提供 了 一 套 界 面 友 好 、 功 能 齐全 的 数据 库 开 发 工具 。Oracle 使 用 PL/SQL 语言 执行 各 种 
操作 ， 具 有 可 开放 性 、 可 移植 性 、 可 伸缩 性 等 功能 。 特 别 是 在 Oracle 8 中 ， 支 持 面向 对 象 的 功 
能 ， 如 支持 类 、 方 法 、 属 性 等 ， 使 得 Oracle 产品 成 为 一 种 对 象 /关系 型 数据 库 管 理 系统 。 

2. Microsoft SQL Server 

Microsoft SQL Server 是 一 种 典型 的 关系 型 数据 库 管理 系统 ， 可 以 在 许多 操作 系统 上 运行 ， 
它 使 用 Transact-SQL 语言 完成 数据 操作 。 由 于 Microsoft SQL Server 是 开放 式 的 系统 ， 其 他 系 
统 可 以 与 它 进行 完好 的 交互 操作 。 目 前 最 新 版 本 的 产品 为 Microsoft SQL Server 2000， 它 具有 
可 靠 性 、 可 伸缩 性 、 可 用 性 、 可 管理 性 等 特点 ， 为 用 户 提供 完整 的 数据 库 解 决 方案 。 

3. Microsoft Access 

作为 Microsoft Office 组 件 之 一 的 Microsoft Access 是 在 Windows 环境 下 非常 流行 的 桌面 型 
数据 库 管 理 系 统 。 使 用 Microsoft Access 无 须 编写 任何 代码 ， 只 需 通 过 直观 的 可 视 化 操作 , 就 
可 以 完成 大 部 分 数据 管理 任务 。 在 Microsoft Access 数 据 库 中 , 包括 许多 组 成 数据 库 的 基本 要 素 。 
这 些 要 素 是 存储 信息 的 表 、 显 示人 机 交互 界面 的 窗 体 、 有 效 检索 数据 的 查询 、 信 息 输出 载体 的 
报表 、 提 高 应 用 效率 的 宏 、 功 能 强大 的 模块 工具 等 。 它 不 仅 可 以 通过 ODBC 与 其 他 数据 库 相 连 ， 
实现 数据 交换 和 共享 ， 还 可 以 与 Word、Excel 等 办 公 软 件 进行 数据 交换 和 共享 ， 并 且 通 过 对 象 
链接 与 嵌入 技术 在 数据 库 中 嵌入 和 链接 声音 、 图 像 等 多 媒体 数据 。 
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Access 更 适合 一 般 的 企业 网 站 ， 因 为 开发 技术 简单 ， 而 且 在 数据 量 不 是 很 大 的 网 站 上 ， 检 
索 速度 快 。 不 用 专门 去 分 离 出 数据 库 空 间 ， 数 据 库 和 网 站 在 一 起 ， 节 约 了 成 本 。 而 一 般 的 大 型 
政府 、 门 户 网 站 ， 由 于 数据 量 比较 大 ， 所 以 选用 SQL 数据 库 ， 可 以 提高 海量 数据 检索 的 速度 。 


创建 Access 数据 库 


与 其 他 关系 型 数据 库 系统 相 比 ，Access 提供 的 各 种 工具 既 简单 又 方便 ， 更 重要 的 是 Access 
提供 了 更 为 强大 的 自动 化 管理 功能 。 

下 面 以 Access 为 例 讲述 数据 库 的 创建 ， | 组 合 框 中 输入 liuyan， 如 图 28-23 所 示 。 
具体 操作 步骤 如 下 : 


大 知识 要 点 去 

数据 库 是 计算 机 中 用 于 储存 、 处 理 大 量 数 
据 的 软件 。 在 创建 数据 库 时 ， 将 数据 存储 在 表 
中 ， 表 是 数据 库 的 核心 。 在 数据 库 的 表 中 可 以 
按照 行 或 列 来 表示 信息 。 表 的 每 一 行 称 为 一 个 
“记录 ”, 而 表 中 的 每 一 列 称 为 一 个 “字段 ”， : 一 一 
字段 和 记录 是 数据 库 中 最 基本 的 术语 。 国 2833 “六 作者 奸 村 拓 库 ” 尖 合 提 

_ 西单 击 “ 创 建 ” 按 钮 ， 弹 出 如 图 28-24 所 示 
轴 启动 Access 软件 ， 执 行 “ 文 件 ”|“ 新 建 ” Se 
命令 ， 打开“ 新 建文 件 ” 窗 格 ， 如 图 28-22 所 ”的 窗口 ， 双 击 “使 用 设计 器 创 建 表 ”选项 ， 


示 ， 在 窗 格 中 单 击 “ 空 数据 库 ” 超 链接 。 弹出 “ 表 1: 表 ” 窗口 , 在 “字段 名 称 ”和 “ 数 


据 类 型 ”文本 框 中 分 别 输入 如 图 28-25 所 示 的 
字段 。 


a 000 文件 格式 ) 
3 订 ， 

国 20 

加 全 用 现 有 数据 的 项 目 
团 合用 新 和 的 项 目 
团 根据 现 有 文件 


加 
加 
园 ii 加 和 到 卫 中 建 胡 


模板 
到 同上 搜索 : 


蕊 0ffice 0nline 模板 


团 相机 上 的 模板 


图 28-22 “新 建文 件 ” 窗 格 


加 弹出 “文件 新 建 数 据 库 ” 对 话 框 ， 在 对 话 
框 中 选择 数据 库 保存 的 位 置 ， 在 “文件 名 ” 


图 28-25 输入 字段 
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次 知识 要 点 友 
Access 为 数据 库 提 供 了 “文本 ”、“ 备 
注 ”、“ 数 字 ”、“ 日 期 /时 间 ”、“ 货 币 ”、 
“自动 编号 ”、“ 是 / 否 ”、“OLE 对 象 ”、 
“ 超 链接 ”、“ 查 阅 向 导 ” 等 10 种 数据 类 型 
每 种 数据 类 型 的 说 明 如 下 : 
。 文本 数据 类 型 : 可 以 输入 文本 字符 ， 
如 中 文 、 英 文 、 数 字 、 字 符 、 空 白 。 
。 备注 数据 类 型 : 可 以 输入 文本 字符 ， 
但 它 不 同 于 文字 类 型 ， 它 可 以 保存 
约 64KB 字符 。 
。 数字 数据 类 型 :用 来 保存 如 整数 、 
负 整 数 、 小 数 、 长 整数 等 数值 数据 。 
。 日 期 /时 间 数 据 类 型 ， 用 来 保存 和 
日 期 、 时间 有 关 的 数据 。 
。 货币 数据 类 型 : 适用 于 无 须 很 精密 
计算 的 数值 数据 ， 例 如 ， 单 价 、 金 
额 等 。 
。 自动 编号 数据 类 型 : 适用 于 自动 编 
号 类 型 ， 可 以 在 增加 一 笔 数据 时 自 
动 加 1， 产 生 一 个 数字 的 字段 ， 自 
动 编号 后 ， 用 户 无 法 修改 其 内 容 。 
。 是 /和 否 数 据 类 型 : 关于 逻辑 判断 的 
数据 ， 都 可 以 设 定 为 此 类 型 。 
。 OLE 对 象 数 据 类 型 : 为 数据 表 链 接 
诸如 电子 表格 、 图 片 、 声 音 等 对 象 。 
。 超 链 接 数 据 类 型 : 用 来 保存 超 链 接 
数据 ， 如 网 址 、 电 子 邮 件 地 址 。 
。 查阅 向 导数 据 类 型 : 用 来 查询 可 预 
知 的 数据 字段 或 特定 数据 集 。 


创建 数据 库 连 接 


吗 设计 完 表 后 关闭 设计 表 窗 口 ， 弹 出 如 图 
28-26 所 示 的 对 话 框 ， 提 示 “ 是 否 保存 对 表 1 
设计 的 更 改 ”， 单 击 “ 是 ”按钮 ， 弹 出 如 图 
28-27 所 示 的 “另存 为 ”对 话 框 ， 在 对 话 框 中 
输入 表 的 名 称 。 


图 28-27 “另存 为 ”对 话 框 


咕 单 击 “ 确 定 ” 按 钮 ， 弹 出 如 图 28-28 所 示 
的 对 话 框 ， 单 击 “ 是 ”按钮 即 可 插入 主键 ， 
此 时 在 数据 库 中 可 以 看 到 新 建 的 表 ， 如 图 
28-29 所 示 。 

本 


渍 术 定 义 主妇 
A Fm eae -TRYETem reer 
人 


图 28-28 弹出 提示 信息 


图 28-29 新 建 的 表 


动态 页 面 最 主要 的 就 是 结合 后 台数 据 库 ， 自 动 更 新 网 页 ， 所 以 离开 数据 库 的 网 页 也 就 谈 不 
上 动态 了 。 任 何 内 容 的 添加 、 删 除 、 修 改 、 检 索 都 是 建立 在 连接 基础 上 进行 的 。 

要 在 ASP 中 使 用 ADO 对 象 来 操作 数据 库 ， 首 先 要 创建 一 个 指向 该 数据 库 的 ODBC 连接。 
在 Windows 系统 中 ，ODBC 的 连接 主要 通过 ODBC 数据 源 管 理 器 来 完成 。 下 面 就 以 Windows 
7 为 例 讲述 ODBC 数据 源 的 创建 过 程 ， 具 体操 作 步 又 如 下 : 
国 单 击 “ 开 始 按钮 ”, 执行 “控制 面板 ”| “系统 和 安全 ”|“ 管 理工 具 ”|“ 数 据 源 (ODBC) ”命令 ， 
弹出 “ODBC 数据 源 管理 器 ”对 话 框 , 在 对 话 框 中 切换 到 “系统 DSN” 选 项 卡 , 如 图 28-30 所 示 。 
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芭 单 击 “ 添 加 ”按钮 ， 弹 出 “创建 新 数据 源 ”对 话 框 ,选择 如 图 28-31 所 示 的 设置 后 ， 单 击 “ 完 
成 ”按钮 。 


系 六 吉 据 源 吕 ): 


名 称 “驱动 程序 


ees) | 
图 28-30 “系统 DSN” 选 项 卡 图 28-31 “创建 新 数据 源 ” 对 话 框 
六 提示 友 
64 位 Windows 7 的 操作 系统 里 ODBC 无 法 添加 “修改 ”配置 ， 添 加 数据 源 时 只 有 SQL 
Server 可 选 ， 如 图 28-32 所 示 。 


图 28-32 添加 数据 源 


解决 方法 是 : 
通过 C:/Windows/SysWOW64/odbcad32.exe 启动 32 位 版 本 ODBC 管理 工具 ， 便 可 解决 ， 
效果 如 图 28-33 所 示 。 


图 28-33 添加 修改 配置 
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三 弹出 如 图 28-34 所 示 的 “ODBC Microsoft Access 安装 ”对 话 框 ， 选 择 数据 库 的 路 径 ， 在 “ 数 
据 源 名 ”文本 框 中 输入 数据 源 的 名 称 ， 单 击 “确定 ”按钮 ， 在 如 图 28-35 所 示 的 对 话 框 中 可 以 
看 到 创建 的 数据 源 。 


I 条 
系 包 珀 措 基 加 


名 称 “更 动 理 序 
国 rive ao Mierosctt hecess fmab) 


| 驱动 程序 | 跟 路 | 连接 地 | 关 


Cm 


教 握 库 : 妹 且 0D 
ELT ] [ 候 夏 oj [ 括 汪 呈 -- En 


| 


| [RE ] [| 


图 28-34 “ODBC Microsoft Access 安装 ”对 话 框 


于 二 EE Bea LN | ES 


图 28-35 创建 的 数据 源 
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第 DO9 章 动态 网 页 开发 语言 ASP 基础 与 应 用 


ASP 是 Active Server Page 的 缩写 ， 意 为 “活动 服务 器 网 页 ”。ASP 是 微软 公司 开发 的 代 


替 CGI 脚本 程序 的 一 种 应 用 ， 它 可 以 与 数据 库 和 其 他 程序 进行 交互 ， 是 一 种 简单 、 方 便 的 编 
程 工具 。ASP 的 网 页 文件 的 格式 是 .asp， 现 在 常用 于 各 种 动态 网 站 中 。 它 能 很 好 地 将 脚本 语言 、 
HTML 标记 语言 和 数据 库 结合 在 一 起 ， 创 建 网 站 中 各 种 动态 应 用 程序 。 可 以 使 用 数据 库 对 信息 
资料 进行 收集 ， 可 以 通过 网 页 程序 来 操控 数据 库 ， 可 以 随时 随地 发 布 最 新 的 消息 和 内 容 ， 可 以 
快速 查找 需要 的 信息 资料 。 


令 了 解 ASP 的 基本 概念 令 ”掌握 ASP 中 内 置 对 象 的 使 用 
仿 ”熟悉 ASP 的 工作 原理 


ASP 概述 


ASP 是 嵌入 网 页 中 的 一 种 脚本 语言 ， 它 可 以 是 HTML 标记 、 文 本 和 脚本 命令 的 任意 组 合 
ASP 文件 的 扩展 名 是 .asp， 而 不 是 传统 的 .htm。 


29.1.1 ASP 简介 


ASP 是 一 种 服务 器 端 脚本 编写 环境 ， 可 以 用 来 创建 和 运行 动态 网 页 或 Web 应 用 程序 。 
ASP 网 页 可 以 包含 HTML 标记 、 普 通 文 本 、 脚 本 命令 及 COM 组 件 等 。 利 用 ASP 可 以 向 网 页 
中 添加 交互 式 内 容 ， 也 可 以 创建 使 用 HIML 网 页 作为 用 户 界面 的 Web 应 用 程序 

下 面 的 代码 实例 是 一 个 基本 的 ASP 的 程序 : 


<html> 

<head> 

<title> 我 的 第 一 个 ASP 程序 </title> 
</head> 

<body> 

<%response.write ("我 的 第 一 个 ASP 程 序 ")%> 
</body> 

</html> 


在 浏览 器 中 浏览 ， 效 果 如 图 29-1 所 示 。 


我 的 第 一 个 &SP 程 序 - Windows Internet Exzplorer 
GO v (BE)http://169.254.77.39/4.1.1.asp Wt xX 
链接 区] Windows 居 Windows Mledia 尼 | 免费 Hotmail 县 | 自 定义 链接 


宽 安居 我 H 第 一 个 1s? 程序 [| 全 " 田 - 避 "四 76o 登 闪 D- 


我 的 第 一 个 ASP 程 序 


图 29-1 简单 的 ASP 程序 
仔细 分 析 该 程序 可 以 看 出 ，ASP 程序 共 由 两 部 分 组 成 : 一 部 分 是 HTML 标题 ， 另 一 部 分 
就 是 嵌入 在 “<%” 和 “%>” 中 的 ASP 程序 。 
在 ASP 程序 中 ， 需 要 将 内 容 输出 到 页 面 上 时 ， 可 以 使 用 Response.Write0) 方法 。 


29.1.2 ASP 的 工作 原理 
如 图 29-2 所 示 ，ASP 的 工作 原理 分 为 以 下 几 个 步骤 : 
而 用 户 向 浏览 器 地 址 栏 输入 网 址 ， 默 认 页 面 的 扩展 名 是 .asp。 
本 浏览 器 向 服务 器 发 出 请 求 。 
葬 服 务 器 引擎 开始 运行 ASP 程序 。 
04ASP 文件 按照 从 上 到 下 的 顺序 开始 处 理 ， 执 行 脚本 命令 ， 执 行 HTML 页 面 内 容 。 


0 页 面 信息 发 送 到 浏览 器 。 
He Web 服 务 器 SQL 请 求 
Web | 区 | 数据 库 
浏览 器 |e 应 用 服务 器 服务 器 
HTML 界 面 结果 


图 29-2 ASP 的 工作 原理 


上 述 步 骤 基 本 上 是 ASP 的 整个 工作 流程 。 但 这 个 处 理 过 程 是 相对 简化 的 ， 在 实际 的 处 理 
过 程 中 ， 还 可 能 会 涉及 诸多 问题 ， 如 数据 库 操作 、ASP 页 面 的 动态 产生 等 。 此 外 ，Web 服务 器 
也 并 不 是 接 到 一 个 ASP 页 面 请 求 就 重新 编辑 一 次 该 页 面 ， 如 果 某 个 页 面 再 次 接收 到 和 前 面 完 
全 相同 的 请 求 ， 服 务 器 会 直接 去 缓冲 区 中 读 取 编译 的 结果 ， 而 不 是 重新 运行 。 


ASP 连接 数据 库 


数据 库 网 页 动态 效果 的 实现 ， 其 实 就 是 将 数据 库 表 中 的 记录 显示 在 网 页 上 。 因 此 如 何在 网 
页 中 创建 数据 库 连 接 ， 并 读 取出 数据 显示 ， 是 开发 动态 网 页 的 一 个 重点 。 
用 得 最 多 的 就 是 Access 和 SQL Server 数据 库 ， 下 面 介绍 各 自 的 连接 语句 。 


390 


1. ASP 连接 Access 数据 库 语 句 


Set Conn=Server.CreateObject ("ADODB -Connection") 
Connstr="DBQ="+server.mappath ("bbs.mdb")+";DefaultDir=; 
DRIVER={Microsoft AccessDriver(*.mdb)};" 

Conn.Open connstr 


其 中 ，Set Conn=Server.CreateObject("ADODB.Connection") 为 建立 一 个 访问 数据 的 对 象 。 
server.mappath("bbs.mdb") 是 告诉 服务 器 Access 数据 库 访问 的 路 径 。 
2. ASP 连接 SQLServer 数据 库 语句 


Set conn = Server.CreateObject ("ADODB.Connection") 
conn.Open"driver={SQLServer};server=202.108.32.94;uid=wu77445;pwd=p78022; 
database=w" 

conn open 


其 中 ，Set conn = Server.CreateObject("ADODB.Connection") 为 设置 一 个 数据 库 的 连接 对 象 。 
driver=〈) 告诉 连接 的 设备 名 是 SQLServer。server 是 连接 的 服务 器 的 瑟 地 址 ，Uid 是 指 用 户 
的 用 户 名 ，pwd 是 指 的 用 户 的 password，database 是 用 户 数据 库 在 服务 器 端的 数据 库 的 名 称 。 


Request 对 象 


Request 对 象 的 作用 是 与 客户 端 交互 ， 收 集 客户 端的 Fomm、Cookies、 超 链接 ， 或 者 收集 
服务 器 端的 环境 变量 。 


29.3.1 集合 对 象 

Request 提供 了 如 下 5 个 集合 对 象 ， 利 用 这 些 集合 可 以 获取 不 同类 型 的 客户 端 发 送 的 信 
息 或 服务 器 端 预定 的 环境 变量 的 值 : Client Certificate、Cookies、Form、Query String、Server 
Variables 。 

1. Client Certificate 

Client Certificate 用 于 检索 存储 在 发 送 到 HTTP 请 求 中 客户 端 证 书 中 的 字段 值 。 它 的 语法 
如 下 : 


Request.Client Certificate 


六 提示 友 

浏览 器 端 要 用 https:/ 与 服务 器 连接 ， 而 服务 器 端 也 要 设置 用 户 需 要 认证 。Request. 
ClientCertificate 才 会 有 效 。 

2. Cookies 

Request. Cookies 和 Response. Cookies 是 相对 的 。Response. Cookies 是 将 Cookies 写 入 ， 而 
它 则 是 将 Cookies 的 值 取出 。 语 法 如 下 : 


变量 = Request .Cookies (Cookies 的 名 字 ) 
3. Form 


Form 是 用 来 取得 由 表单 所 发 送 的 值 。 
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4. Query String 

Query String 集合 通过 处 理 用 户 使 用 GET 方法 发 送 到 服务 器 端的 表单 信息 ， 将 URL 后 的 
数据 提取 出 来 。 

Query String 集合 语法 如 下 : 

Request. Query String (variable) [(index) | .Count] 

其 中 参数 的 含义 如 下 : 

。 variable: 是 HTTP 指定 要 查询 字符 串 的 变量 名 。 

。 index: 是 可 选 参数 ， 使 用 该 参数 可 以 访问 某 参数 中 多 个 值 中 的 一 个 ， 它 可 以 是 1 到 

Request. QueryString (parameter) Count 之 间 的 任意 整数 。 

。 count: 指明 变量 值 的 个 数 ， 可 以 调用 “RequestQueryString (variable) Count ”来 确定 。 

可 看 出 QueryString 集合 与 Form 集合 的 使 用 方法 类 似 ， 而 区 别 在 于 : 对 于 客户 端 用 GET 
传送 的 数据 ， 使 用 QueryString 集合 提取 数据 ， 而 对 于 客户 端 用 POST 传送 的 数据 ， 使 用 Form 
集合 提取 数据 。 一 般 情况 下 ， 大 量 数据 使 用 POST 方法 ， 少 量 数据 才 使 用 GET 方法 。 

5. Server Variables 

Server Variables 用 来 存储 环境 变量 及 HTTP 标题 (Header) 。 


29.3.2 属性 

Request 对 象 只 有 一 个 属性 Total Bytes， 表 示 从 客户 端 接收 数据 的 字 节 长 度 ， 其 语法 格式 
如 下 : 

Request. Total Bytes 
29.3.3 方法 


Request 对 象 只 有 一 个 方法 Binary Read。Binary Read 方法 以 二 进 制 方式 来 读 取 客 户 端 使 用 
Post 方式 所 传递 的 数据 。 其 语法 如 下 : 


数组 名 = Request . Binary Read (数值 ) 


29.3.4 ”Request 对 象 使 用 实例 


下 面 通过 一 个 实例 讲述 Request 对 象 的 使 用 方法 ， 这 里 创建 两 个 文件 ， 一 个 表单 提交 页 面 
1.asp， 一 个 提交 表单 处 理 页 面 2.asp。 
1.asp 的 代码 如 下 : 


<html> 
<head> 
<title>Form 集 合 </title> 
</head> 
<body> 
<form method="post" action="2.asp"> 
<p> 请 输入 你 的 姓名 : 
<input name="tname" type="text"/> 
</p> 
<p> 请 选择 你 的 性 别 : 
<select name="sex"> 
<option value="man"> 男 
<option value="woman"> 女 
</select> 
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</p> 
<p> 
<input type="submit" name="bs" value=" 提交" > 
<input type="reset" name="br"” value=" 重 写 ”> 
</p> 
</form> 
</body> 
</html> 


在 浏览 器 中 浏览 效果 ， 如 图 29-3 所 示 。 
2.asp 的 代码 如 下 : 


<% Q@language="vbscript" %> 
<% if request.form("tname")<>" "then 
dim strname,strsex 
strname=request .form("tname" 
strsex=request.form("sex") 
if strsex="man" then 
response.writel(" 欢迎 你 ，"+strname+" 先生 !") 
else 
response.write(" 欢迎 你 , "+strname+" 女士 !") 
end if 
else 


response.write(" 你 没有 输入 姓名 .") 


end if%> 


当 在 图 29-3 所 示 的 表单 提交 页 面 输入 相关 信息 ， 单 击 “ 提 交 ” 按 钮 后 ， 进 入 2.asp 页 面 ， 
效果 如 图 29-4 所 示 。 


凡 Fora 录 他 = Iornoft lotemot Rplorer 
EECTEOETTIEOCTIO 
Bn 四 - 国 国 的 户 吉 灾 mx 已 富 . 吕 天 - 


Hi 本 [we al 


立 牢 中” 补 强 区 ) 查看 | (8 工 所 II) 大 抽 吧 
Ga- 日 - 国 国 物 训 轨 友 Wx 克 六- 学 面 " 加 
请 输入 你 的 姓名 : | EN 
次 迎 你 . 干 晓 民 
请 选择 你 的 性 别 :| 台 国 欢迎 你 , 王 晓 民 先生 ! 
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图 29-3 表单 提交 页 面 图 29-4 代码 执行 效果 


Response 对 象 


与 Request 是 获取 客户 端 HTTP 信息 相反 ， Response 对 象 的 主要 功能 是 将 数据 信息 从 服务 
器 端 传送 数据 至 客户 端 浏览 器 。 


29.4.1 集合 对 象 


Response 对 象 只 有 一 个 数据 集合 ， 就 是 Cookies。 它 用 来 在 Client 端 写 入 相关 数据 ， 以 便 
以 后 使 用 。 它 的 语法 如 下 : 


Response. Cookies (Cookies 的 名 字 y=Cookics 的 值 


网 页 设计 与 网 站 建设 完全 实战 手册 


注意 : Response.Cookies 语句 必须 放 在 ASP 文件 的 最 前 面 ， 也 就 是 <html> 之 前 ， 否 则 将 
发 生 错误 。 


29.4.2 属性 


Response 对 象 中 有 很 多 属性 ， 如 表 29-1 所 示 。 
表 29-1 Response 对 象 的 常见 属性 
属性 | 说 明 

Buffer 指定 是 否 使 用 缓冲 页 输出 
ContentType 指定 响应 的 HTML 内 容 类 型 
Expires [指定 在 浏览 器 上 缓冲 存储 的 页 面 距 过 期 还 有 多 长 时 间 
ExpiresAbsolute | 指定 缓存 于 济 览 器 中 的 页 面 的 确切 到 期 日 期 和 时 间 
Status [用 来 处 理 服务 器 返回 的 错误 
IsClientConnected 只 读 属性 ， 用 于 判断 客户 端 是 否 能 与 服务 器 相连 


29.4.3 方法 


Response 对 象 的 方法 包括 Write、Redirect、Clear、End、Flush、BinaryWrite、AddHeader 
和 AppendToLog 等 共 8 种 ， 如 表 29-2 所 示 为 Response 对 象 的 常见 方法 。 
表 29-2 Response 对 象 的 常见 方法 
Write 将 指定 的 字符 串 写 到 当前 的 HTML 输出 


Redirect 使 浏览 器 立即 重 定向 到 指定 的 URL 
Clear 清除 缓冲 区 中 的 所 有 HTML 输出 
End 使 Web 服务 器 停止 处 理 脚 本 并 返回 当前 结果 


Flush 立即 发 送 缓冲 区 的 输出 


AddHeader 用 指定 的 值 添加 HIML 标题 


BinaryWrite 不 经 任何 字符 转换 就 将 指定 的 信息 写 到 HTML 输出 
Appendtolog 在 Web 服务 器 记录 文件 末尾 加 入 用 户 数 据 记 录 


29.4.4 ”Response 对 象 使 用 实例 


Wirite 方法 是 Response 对 象 最 常用 的 方法 ， 它 可 以 把 数据 信息 从 服务 器 端 发 送 到 客户 端 ， 
在 客户 端 动态 地 显示 信息 。 下 面 通过 实例 讲述 Response 对 象 的 使 用 ， 其 代码 如 下 : 


<html> 

<head> 

<title>Response 对 象 实例 </title> 
</head> 


dim myName 
myName=" 我 叫 孙 晨 ! " 
ImyColLor="red" 


Response.Write "你 好 。<br>" ' 直接 输出 字符 串 


Response -Write myName & "<br>" ' 输出 变量 
Response.Write "<font color="” & myColor & "> 我 今年 20 岁 ~" & "</font><br>" 
%> 
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</body> 
</html> 


这 里 使 用 Response.Wirite 方法 输出 客户 信息 ， 运 行 代码 ， 在 浏览 器 中 浏览 ， 效 果 如 图 29-5 


|B] http: /1169. 254.77. 3914.5/4.5. as 加 #7 XX 
链接 尼 Windows 尼 Windows Media 臣 ] 免费 Hotmail 用 自 定义 链接 
帘 诡 | 砍 hespenze 对 旬 实 全 从 -和 目 六 - 避 NED- 使 IAW-” 


你 好 。 
我 叫 孙 晨 1 
我 今年 20 岁 ~ 


图 29-5 Response 对 象 的 使 用 


Server 对 象 


Server 对 象 在 ASP 中 是 一 个 很 重要 的 对 象 ， 许 多 高 级 功能 都 是 靠 它 完成 的 。 
Server 对 象 的 使 用 语法 为 : 

Server. 方法 | 属性 

下 面 将 对 Server 对 象 的 属性 和 方法 进行 简单 的 介绍 。 


29.5.1 属性 
ScriptTimeont 属性 用 来 限定 一 个 脚本 文件 执行 的 最 长 时 间 。 也 就 是 说 ， 如 果 脚 本 超过 时 间 
限度 还 没有 被 执行 完毕 ， 将 会 自动 中 止 ， 并 且 显 示 超 时 错误 。 
其 使 用 语法 为 : 
Server.ScriptTimeont=n 
参数 n 为 设置 的 时 间 ， 单 位 为 秒 ， 默 认 的 时 间 是 90 秒 。 参 数 n 设置 不 能 低 于 ASP 系统 设 
置 中 的 默认 值 ， 否 则 系统 仍然 会 以 默认 值 当 做 ASP 文件 执行 的 最 长 时 间 。 
例如 ， 将 某 个 脚本 的 超时 时 间 设 为 4 分 钟 ， 代 码 如 下 。 
server.ScriptTimeout=240 
友 提示 友 
这 个 设置 必须 放 在 ASP 文件 的 最 前 头 ， 否 则 会 产生 错误 。 


29.5.2 方法 
Serverc 对 象 的 常见 方法 包括 Mappath、 HTMLEncode、URLEncode 和 CreateObject 等 4 种 。 
如 表 29-3 所 示 为 Server 对 象 的 方法 。 
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表 29-3 Server 对 象 的 方法 


[将 指定 的 相对 虚拟 路 径 映射 到 服务 器 上 相应 的 物理 目录 
| 对 指定 的 字符 串 应 用 HTML 编码 
将 一 个 指定 的 字符 串 按 URL 的 编码 输出 


用 于 创建 已 注册 到 服务 器 上 的 ActiveX 组 件 的 实例 


Application 对 象 


Application 对 象 是 一 个 应 用 程序 级 的 对 象 ， 利 用 Application 对 象 可 以 在 所 有 用 户 间 共享 
信息 ， 并 且 可 以 在 Web 应 用 程序 运行 期 间 持久 地 保存 数据 。 

Application 对 象 用 于 存储 和 访问 来 自任 何 页 面 的 变量 , 类 似 于 session 对 象 。 不 同 之 处 在 于 ， 
所 有 的 用 户 分 享 一 个 Application 对 象 ， 而 session 对 象 和 用 户 的 关系 是 一 一 对 应 的 。 


29.6.1 方法 


Application 对 象 只 有 两 种 方法 ， 即 Lock 方法 和 UnLock 方法 。Lock 方法 主要 用 于 保证 同 
一 时 刻 只 有 一 个 用 户 在 对 Application 对 象 进 行 操作 ， 也 就 是 说 使 用 Lock 方法 可 以 防止 其 他 用 
户 同时 修改 Application 对 象 的 属性 ， 这 样 可 以 保证 数据 的 一 致 性 和 完整 性 。 当 一 个 用 户 调用 
一 次 Lock 方法 后 ， 如 果 完 成 任务 ， 应 该 使 用 UnLock 方法 将 其 解 开 以 便 其 他 用 户 能 够 访问 。 
UnLock 方法 通常 与 Lock 方法 同时 出 现 ， 用 于 取消 Lock 方法 的 限制 。Application 对 象 的 方法 
及 说 明 如 表 29-4 所 示 。 


表 29-4 Application 对 象 的 方法 


锁定 Application 对 象 ， 使 得 只 有 当前 的 ASP 页 面 对 内 容 能 够 进行 访问 


解除 对 在 Application 对 象 上 的 ASP 网 页 的 锁定 


为 什么 要 锁定 数据 呢 ? 因为 Application 对 象 所 储存 的 内 容 是 共享 ， 有 异常 情况 发 生 时 ， 如 
果 没 有 锁定 数据 会 造成 数据 不 一 致 的 状况 发 生 ， 并 造成 数据 的 错误 。 Lock 与 Unlock 的 语法 如 下 : 


Application.lock 
Application.unlock 


例如 : 
Application.lock 


Application("sy")=Application ("sy")+sj 
Application.unlock 


以 上 的 sy 变量 在 程序 执行 “+sj” 时 会 被 锁定 住 ， 其 他 和 欲 更 改 sy 变量 的 程序 将 无 法 更 改 它 ， 
直到 锁定 解除 为 止 。 


29.6.2 事件 


Application 对 象 提供 了 在 它 启 动 和 结束 时 触发 的 两 个 事件 ，Application 对 象 的 事件 及 说 明 
如 表 29-5 所 示 。 
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表 29-5 Application 对 象 的 事件 
说 明 


Application-OnStart 就 是 在 Application 开始 时 所 触发 的 事件 ， 而 Application-OnEnd 则 是 在 
Application 结束 时 所 触发 的 事件 。 那 它们 怎么 用 呢 ? 其 实 这 两 个 事件 是 放 在 Global.asa 当中 的 ， 
用 法 也 不 像 数 据 集合 或 属性 那样 是 “对 象 . 数据 集合 ”或 “对 象 .属性 ”， 而 是 以 子 程序 的 方 
式 存在 。 它 们 的 格式 是 : 


Sub Application-Onstart 
程序 区 域 

End Sub 

Sub Application-OnEnd 
程序 区 域 

End Sub 


下 面 的 代码 是 Application 对 象 的 事件 使 用 实例 : 


<html> 

<body> 

<script language=VBScript runat=server> 
Sub application-Onstart 
Application("Today")=date 
Application("Times")=time 

End sub 

</script> 

</body> 

</html> 


在 这 里 用 到 了 Application-OnStart 事 件 。 可 以 看 到 将 这 两 个 变量 放 在 Application-OnStart 中， 
就 是 让 Application 对 象 一 开始 就 有 Today 和 Times 这 两 个 变量 。 


Session 对 象 


使 用 Session 对 象 可 以 存储 特定 客户 的 Session 信息 ， 即 使 该 客户 端 由 一 个 Web 页 面 到 另 
一 个 Web 页 面 ， 该 Session 信息 仍然 存在 。 与 Application 对 象 相 比 ，Session 对 象 更 接近 于 普 
通 应 用 程序 中 所 说 的 全 局 变量 。 用 Session 类 型 定义 的 变量 可 同时 供 打开 同一 个 Web 页 面 的 客 
户 共 享 数据 ， 但 两 个 客户 之 间 无 法 通过 Session 变量 共享 信息 ， 而 Application 类 型 的 变量 则 可 
以 实现 该 站 点 的 多 个 用 户 之 间 在 所 有 页 面 中 的 共享 信息 。 

在 大 多 数 情 况 下 ， 利 用 Application 对 象 在 多 用 户 间 共 享 信息 ; 而 Session 变量 作为 全 局 变 
量 ， 用 于 在 同一 用 户 打开 的 所 有 页 面 中 共享 数据 。 


29.7.1 属性 
Session 对 象 有 两 个 属性 : SessionID 和 Timeout， 如 表 29-6 所 示 。 
表 29-6 Session 的 属性 
说 明 
| 返回 当前 会 话 的 唯一 标志 ， 它 将 自动 地 为 每 一 个 Session 分 配 不 同 的 ID 〈 编 号 ) 
定义 了 用 户 Session 对 象 的 最 长 执行 时 间 
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29.7.2 方法 


Session 对 象 只 有 一 个 方法 ， 就 是 Abandon。 它 用 来 立即 结束 Session 并 释放 资源 。 
Abandon 的 语法 如 下 : 


= Session.Abandon 


29.7.3 事件 


Session 对 象 也 有 两 个 事件 : Session OnStart 和 Session OnEnd, 其 中 Session Start 事件 
是 在 第 一 次 启动 Session 程序 时 触发 此 事件 ， 即 当 服 务 器 接收 到 对 ActiveServer 应 用 程序 中 的 
URL 的 HTTP 请 求 时 ， 触 发 此 事件 并 建立 Session 对 象 ; Session OnEnd 事件 是 在 调用 Session. 
Abandon 方法 时 ， 或 者 在 Timeout 的 时 间 内 没有 刷新 时 触发 此 事件 。 

这 两 个 事件 的 用 法 和 Application.OnStart 及 Application.OnEnd 类 似 ， 都 是 以 子 程序 的 方式 
放 在 Globalasa 当中 。 语 法 如 下 : 


Sub Session.Onstart 
程序 区 域 

End Sub 

Sub Session.OnEnd 
程序 区 域 

End Sub 


29.7.4 ”Session 对 象 实例 
下 面 的 实例 是 Session 的 Contents 数据 集合 的 使 用 ， 其 代码 如 下 : 


<%@ language="VBScript"%></head> 
<%dim customer info 
dim interesting(2) 
interesting(0)=" 上 网 " 
interesting (1)=" 足球" 
interesting (2)=" 购物 " 
response.write"sessionID:"&session.sessionID&g"<p>" 
session(" 用 户 名 称 ")=" 孙 晨 " 
session(" 年 龄 ")="18" 
session(" 证 件 号 ")="54235" 
set objconn=server.createobject ("ADODB.connection") 
set session(" 用 户 数 据 库 ")=objconn 
for each customer info in session.contents 
if isobject (session.contents(customer info)) then 
response.write (customer infog" 此 页 无 法 显示 。"&"<br>") 
else 
if isarray (session.contents(customer info)) then 
response.write" 个 人 爱好 : <br>" 
for each item in session.contents(customer info) 
response.write"<li>"gitemg"<br>" 
next 
response.write"</ol>" 
else 
response.write (customer info&": "&session.contents(customer info)&"<br>") 
ed 
end if 
next%®> 


在 浏览 器 中 浏览 ， 效 果 如 图 29-6 所 示 。 
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http://169. 254. 77. 39/4. 8/4. 8.asp — Windows Internet Explorer 


GE ~ 区] http://169.254.77.39/4.8/4.8.as1 WW $+ X 
访 接 尼 ] Windows 尼 ] Windows Nedia 花 ] 免费 Hotnail 下] 自 定义 链接 
突 站 | 知 Mttp:1lea zstrrsas | 丛 "- 目 -总 -上 ND 使 IRO@- | 


sessionID:330838694 


用 户 名 称 ， 孙 晨 

年 龄 ， 18 

证 件 号 ; 542355 
用 户 数据 库 此 页 无 法 显示 。 


图 29-6 Session 对 象 实例 


本 章 小 结 


本 章 主要 介绍 了 ASP 的 基本 知识 ， 包 括 ASP 的 基本 概念 、ASP 创建 数据 库 连接 、ASP 存 
取 数 据 、 使 用 RecordSet 对 象 等 。ASP 提供 了 可 在 脚本 中 使 用 的 内 部 对 象 。 这 些 对 象 使 用 户 
更 容易 收集 通过 浏览 器 请 求 发 送 的 信息 、 响 应 浏览 器 及 存储 用 户 信息 ， 从 而 使 网 站 开发 者 摆 
脱 了 很 多 烦琐 的 工作 ， 提 高 了 编程 效率 。 本 章 主要 介绍 了 常见 的 5 个 ASP 的 内 置 对 象 ， 包 括 
Request 对 象 、Response 对 象 、Server 对 象 、Application 对 象 和 Session 对 象 。 


399 


第 了 OO 章 动态 网 页 脚本 语言 VBScript 


VBScript 是 由 微软 公司 推出 的 ， 其 语法 是 由 Visual Basic (VB) 演化 来 的 ， 可 以 看 做 是 


VB 语言 的 简化 版 ， 与 VB 的 关系 也 非常 密切 。 它 具有 源 语 言 容易 学 习 的 特性 。 目 前 这 种 语言 
广泛 应 用 于 网 页 和 ASP 程序 制作 ， 同 时 还 可 以 直接 作为 一 个 可 执行 程序 。 用 于 调试 简单 的 VB 
语句 非常 方便 。 


技术 要 点 | 
多 了 解 VBScript 的 基本 概念 多 掌握 条 件 语句 的 使 用 
多 熟悉 VBScript 数据 类 型 多 ”掌握 循环 语句 的 使 用 
多 ”掌握 VBScript 变量 的 使 用 多 ”掌握 VBScript 过 程 的 使 用 
多 ”掌握 VBScript 运算 符 的 使 用 多 ”掌握 VBScript 函数 的 使 用 


I 及 和 VBScript 概述 


VBScript 是 一 种 脚本 语言 , 源 自 微软 的 Visual Basic, 其 目的 是 为 了 加 强 HTML 的 表达 能 力 ， 
提高 网 页 的 交互 性 。 在 网 页 中 加 入 VBScript 脚本 语言 后 ,就 可 以 制作 出 动态 或 者 交互 式 的 网 页 ， 
以 增进 客户 端 网 页 上 数据 处 理 与 运算 的 能 力 。 

VBScript 通常 和 HTML 结合 在 一 起 使 用 ， 在 一 个 HIML 文件 中 ，VBScript 有 别 于 HTML 
其 他 元 素 的 声明 方式 。 下 面 的 代码 是 一 个 在 HTML 页 面 中 插入 的 VBScript 实例 : 


<html> 

<head> 

<title> 测试 按钮 事件 </title> 

</head> 

<body> 

<form name="forml"> 
<input type="button"” name="buttonl"” value=" 单 击 "> 
<script for="buttonl" event="onclick" language="vbscript"> 

msgbox " 按钮 被 单 击 ! " 

</script> 

</form> 

</body> 

</html> 


在 浏览 器 中 浏览 ， 当 单 击 “ 单 击 ” 按 钮 时 效果 如 图 30-1 所 示 。 
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图 30-1 浏览 效果 


从 上 面 可 以 看 出 ，VBScript 代码 写 在 成 对 的 <Script> 标记 之 间 。 代 码 的 开始 和 结束 部 分 都 
有 <Script> 标记 ， 其 中 Language 属性 用 于 指定 所 使 用 的 脚本 语言 。 这 是 由 于 浏览 器 能 够 使 用 
多 种 脚本 语言 ， 所 以 必须 在 此 指定 所 使 用 的 脚本 语言 。 

注意 <Script> 中 的 VBScript 代码 被 嵌入 在 注释 标记 (<!-- 和 -->) 中 ， 这 样 能 够 避免 不 能 
识别 <Script> 标记 的 浏览 器 将 代码 显示 在 页 面 中 。 

Script 块 可 以 出 现在 HTML 页 面 的 任何 地 方 (Body 或 Head 部 分 ) ， 最 好 将 所 有 的 一 般 目 
标 Script 代码 放 在 Head 部 分 中 ， 以 便 所 有 的 Script 代码 集中 放置 。 这 样 可 以 确保 在 Body 部 分 
调用 代码 之 前 所 有 Script 代码 都 被 读 取 并 解码 。 

VBScript 具有 如 下 特点 : 

。 简单 易学 。 

VBScript 的 最 大 优点 在 于 简单 易学 ， 即 使 是 一 个 对 编程 语言 毫 无 经 验 的 人 也 可 以 在 短 时 间 
内 掌握 这 种 脚本 语言 。 这 是 因为 VBScript 去 掉 了 Visual Basic 中 使 用 的 大 多 数 关 键 字 ， 而 仅 保 
留 了 其 中 少量 的 关键 字 ， 从 而 大 大 地 简化 了 Visual Basic 的 语法 ， 使 得 这 种 脚本 语言 更 加 易学 
易 用 。 

。 安全 性 好 。 

由 于 VBScript 是 一 种 脚本 语言 ， 而 不 是 编程 语言 ， 所 以 也 就 没有 编程 语言 所 具有 的 读 写 
文件 和 访问 系统 的 功能 ， 这 就 使 得 想 利用 该 语言 编写 程序 去 侵入 网 络 系统 的 人 无 从 着 手 。 通 过 
这 种 办 法 ，VBScript 的 安全 性 大 为 提高 。 

。 可 移植 性 好 。 

VBScript 不 仅 支 持 Windows 系统 ， 同 时 也 支持 UNIX 系统 和 Mac 系统 。 这 就 使 得 
VBScript 的 可 移植 性 大 为 增强 。 


VBScript 数据 类 型 


VBScript 只 有 一 种 数据 类 型 ， 称 为 Variant。Variant 是 一 种 特殊 的 数据 类 型 ， 根 据 使 用 的 
方式 ， 它 可 以 包含 不 同类 别 的 信息 。 因 为 Variant 是 VBScript 中 唯一 的 数据 类 型 ， 所 以 它 也 是 
VBScript 中 所 有 函数 的 返回 值 的 数据 类 型 。 
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最 简单 的 Variant 可 以 包含 数字 或 字符 串 信息 。Variant 用 于 数字 上 下 文中 时 作为 数字 处 
理 ， 用 于 字符 串 上 下 文中 时 作为 字符 串 处 理 。 这 就 是 说 ， 如 果 使 用 看 起 来 像 是 数字 的 数据 ， 则 
VBScript 会 假定 其 为 数字 并 以 适用 于 数字 的 方式 处 理 。 与 此 类 似 ， 如 果 使 用 的 数据 只 可 能 是 字 
符 串 ， 则 VBScript 将 按 字符 串 处 理 。 也 可 以 将 数字 包含 在 引号 〈" ") 中 使 其 成 为 字符 串 。 

下 面 是 在 VBScript 中 常见 的 常数 : 

。 True/False: 表示 布尔 值 。 

。 ”Empty: 表示 没有 初始 化 的 变量 。 

。 ”Null: 表示 没有 有 效 数据 的 变量 。 

。 Nothing: 表示 不 应 用 任何 变量 。 

还 可 以 自 定义 一 些 常数 ， 如 Const Name=Value。 


VBScript 变量 


变量 是 一 种 使 用 方便 的 占 位 符 ， 用 于 引用 计算 机 内 存 地 址 ， 该 地 址 可 以 存储 脚本 运行 时 可 
更 改 的 程序 信息 。 例 如 ， 可 以 创建 一 个 名 为 ClickCount 的 变量 来 存储 用 户 单 击 网 页 上 某 个 对 象 
的 次 数 。 使 用 变量 并 不 需要 了 解 变量 在 计算 机 内 存 的 地 址 ， 只 要 通过 变量 名 引用 变量 就 可 以 查 
看 或 更 改变 量 的 值 。 在 VBScript 中 只 有 一 个 基本 数据 类 型 即 Variant， 因 此 所 有 变量 的 数据 类 
型 都 是 Variant。 


30.3.1 声明 变量 


可 以 使 用 Dim 语句 、Public 语句 和 Private 语句 在 脚本 中 声明 变量 ， 例 如 : Dim md。 

声明 多 个 变量 时 可 使 用 逗号 分 隔 变量 。 例 如 : Dim sj，sa，gp。 

另 一 种 方式 是 通过 直接 在 脚本 中 使 用 变量 名 这 一 简单 方式 声明 变量 。 但 这 样 有 时 会 由 于 变 
量 名 被 拼 错 而 导致 在 运行 脚本 时 出 现 意外 的 结果 。 因 此 最 好 使 用 Option Explicit 语句 显 式 声明 
所 有 变量 ， 并 将 其 作为 脚本 的 第 一 条 语句 。 


30.3.2 ”命名 规则 


变量 命名 必须 遵循 VBScript 的 标准 命名 规则 ， 其 规则 如 下 : 
第 一 个 字符 必须 是 字母 。 
不 能 包含 嵌入 的 句点 。 
长 度 不 能 超过 255 个 字符 。 
在 被 声明 的 作用 域内 必须 唯一 。 
变量 具有 作用 域 与 存活 期 。 

变量 的 作用 域 由 声明 它 的 位 置 决定 。 如 果 在 过 程 中 声明 变量 ， 则 只 有 该 过 程 中 的 代码 可 以 
访问 或 更 改变 量 值 ， 此 时 变量 被 称 为 过 程 级 变量 。 如 果 在 过 程 之 外 声明 变量 ， 则 该 变量 可 以 被 
脚本 中 的 所 有 过 程 所 识别 ， 称 为 Script 级 变量 ， 具 有 脚本 作用 域 。 

变量 存在 的 时 间 称 为 存活 期 。Script 级 变量 的 存活 期 从 被 声明 的 一 刻 起 ， 直 到 脚本 运行 结 
束 时 止 。 对 于 过 程 变量 ， 其 存活 期 仅 有 该 过 程 运行 的 时 间 ， 该 过 程 结 束 后 变量 即 随 之 消失 。 
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30.3.3 ”给 变量 赋值 

可 以 创建 如 下 形式 的 表达 式 给 变量 赋值 ， 变 量 在 表达 式 左边 ， 要 赋 的 值 在 表达 式 的 右边 。 
例如 : A= 北京 。 

多 数 情况 下 ， 只 需要 给 声明 的 变量 赋 一 个 值 。 只 包含 一 个 值 的 变量 称 为 标量 变量 。 有 时 候 
将 多 个 相关 值 赋 给 一 个 变量 更 为 方便 ， 因 此 可 以 创建 包含 一 系列 值 的 变量 ， 这 被 称 为 数组 变量 。 
数组 变量 和 标量 变量 是 以 相同 的 方式 声明 的 ， 唯 一 的 区 别 是 声明 数组 变量 时 变量 名 后 面 带 有 括 
号 () 。 下 例 即 是 声明 了 一 个 包含 4 个 元 素 的 唯一 数组 : 

Dim A(3) 

虽然 括号 中 显示 的 数字 是 3。 但 由 于 在 VBScript 中 所 有 的 数组 都 是 基于 0 的 ， 所 以 这 个 数 
组 实际 上 包含 了 4 个 元 素 。 在 基于 0 的 数组 中 ， 数 组 元 素 的 数目 总 是 括号 显示 的 数目 加 1。 这 
种 数组 称 为 固定 大 小 的 数组 。 

可 在 数组 中 使 用 索引 为 每 个 元 素 赋值 ， 如 下 所 示 : 


A(0)=5 

A(1)=10 
A(2)=15 
A(3)=20 


VBScript 运算 符 优先 级 


VBScript 包括 算术 运算 符 、 比 较 运算 符 、 连 接 运 算 符 和 逻辑 运算 符 等 。 

当 表达 式 包含 多 个 运算 符 时 ， 将 按 预 定 顺序 计算 每 一 部 分 ， 这 个 顺序 称 为 运算 符 优先 级 。 
可 以 使 用 括号 越过 这 种 优先 级 顺序 ， 强 制 首先 计算 表达 式 的 某 些 部 分 。 运 算 时 总 是 先 执行 括号 
中 的 运算 符 ， 然 后 再 执行 括号 外 的 运算 符 。 但 是 ， 在 括号 中 仍 遵循 标准 运算 符 优先 级 。 

当 表 达 式 包含 运算 符 时 ， 首 先 计算 算术 运算 符 ， 然 后 计算 比较 运算 符 ， 最 后 计算 逻辑 运算 
符 。 所 有 的 比较 运算 符 的 优先 级 相同 ， 即 按照 从 左 到 右 的 顺序 计算 。 算 术 运 算 符 和 届 辑 运算 符 
的 优先 级 如 表 30-1 所 示 。 

表 30-1 算术 运算 符 和 逻辑 运算 符 的 优先 级 


当 乘 号 与 除 号 同时 出 现在 一 个 表达 式 中 时 ， 将 按照 从 左 到 右 的 顺序 计算 乘 、 除 运算 符 。 同 
样 当 加 与 减 同时 出 现在 一 个 表达 式 中 时 ， 将 按照 从 左 到 右 的 顺序 计算 加 、 减 运算 符 。 
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使 用 条 件 语句 


使 用 条 件 语 句 可 以 控制 脚本 的 流程 ， 使 用 条 件 语句 可 以 编写 进行 判断 和 重复 操作 的 


VBScript 代码 。 在 VBScript 中 可 使 用 以 下 条 件 语句 : If…Then*…Else 语句 和 Select Case 语句 。 
30.5.1 使 用 if…then…else 进行 判断 


让 …then…else 语句 用 于 计算 条 件 为 True 或 False， 并 且 根 据 计 算 结果 指定 要 运行 的 语句 。 


让 …then…else 语句 可 以 按照 需要 进行 嵌 套 。 


下 面 的 代码 实例 演示 了 Hf…then*…else 语句 的 基本 使 用 方法 。 


<html> 
<head> 
<title>if...then...else 示 例 </title> 
</head> 
<body> 
<Script Language=VBScript> 
I 
dim hour 
hour=15 
if hour<8 then 
document .write " 欢迎 您 的 光临 ! 早上 好 ! " 
elseif hour>=8 and hour<12 then 
document .write " 欢迎 您 的 光临 ! 上 午 好 ! " 
elseif hour>=12 and hour<18 then 


document .write " 欢迎 您 的 光临 ! 下 午 好 ! " 


else 
document .write " 欢迎 您 的 光临 ! 晚上 好 ! " 
end iE 
--> 
</Script > 
</body> 
</html> 


本 例 演示 了 显示 时 间 功 能 ， 如 果 当 前 时 刻 在 8 点 以 前 显示 为 “欢迎 您 的 光临 ! 早上 


好 ! ”8~12 时 显示 为 “欢迎 您 的 光临 ! 上 午 好 ! ”12~18 时 显示 为 “欢迎 您 的 光临 ! 下 午 好 ! ” 
其 他 时 间 为 “欢迎 您 的 光临 ! 晚上 好 ! ”当前 hour 为 6， 因此 显示 为 “欢迎 您 的 光临 ! 下 午 
好 ! ”， 如 图 30-2 所 示 。 
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欢迎 您 的 光临 ! 下 午 好 ! 


图 30-2 if…then…else 语句 


30.5.2 ”使 用 Select…Case 进行 判断 


Select Case 结构 提供 了 if…then…else 站 结构 的 一 个 变通 形式 ， 可 以 从 多 个 语句 块 中 选择 
执行 其 中 的 一 个 。Select Case 语句 提供 的 功能 与 ff…then…else 语句 类 似 ， 但 是 可 以 使 代码 更 
加 简练 易 读 。 

Select Case 结构 在 其 开始 处 使 用 一 个 只 计算 一 次 的 简单 测试 表达 式 。 表 达 式 的 结果 将 与 结 
构 中 每 个 Case 的 值 比较 。 如 果 匹 配 ， 则 执行 与 该 Case 关联 的 语句 块 。 

下 面 的 实例 演示 了 Select…Case 语句 的 基本 使 用 方法 。 


<html> 
<head> 
<title>select case 示 例 </title> 
</HEAD> 
<body> 
<Script Language=VBScript> 
<!-- 
dim Number 
Number = 3 
select case Number 
Case 1 
msgbox "北京 " 
Case 2 
msgbox " 上海" 
Case 3 
msgbox "广州 " 
Case else 
msgbox " 其 他 城市 " 
end select 
--> 
</Script > 
</body> 
</html> 


运行 程序 ， 在 浏览 器 中 浏览 ， 效 果 如 图 30-3 所 示 。 
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图 30-3 Select…Case 语句 使 用 


使 用 循环 语句 


循环 控制 语句 用 于 重复 执行 一 组 语句 。 循 环 可 以 分 3 类 : 一 类 是 在 条 件 变 为 False 之 前 重 
复 执行 语句 ,一 类 在 条 件 变 为 True 之 前 重复 执行 语句 ， 一 类 则 按照 指定 的 次 数 重复 执行 语句 。 
在 VBScript 脚本 中 可 以 使 用 以 下 循环 语句 : 
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。 ”Do…Loop: 当 条 件 为 True 时 循环 。 
。 使 用 While…Wend: 当 条 件 为 True 时 循环 。 
。 使 用 For…Next: 指定 循环 的 次 数 ， 使 用 技术 器 重复 运行 语句 。 


30.6.1 使 用 Do…Loop 循环 


可 以 使 用 Do*…Loop 循环 语句 多 次 运行 语句 块 ， 当 条 件 为 True 时 ， 或 条 件 变 为 True 之 前 ， 
重复 执行 语句 块 。 下 面 使 用 Do…Loop 循环 语句 计算 1 十 2 十 … 十 5 的 总 和 ， 其 代码 如 下 : 


< 

Dim I Sum 

Sum=0 

i=0 

Do 

i=i+1 

Sum=Sum+i 

Loop Until i=5 

Response.WFite (1+2+…+5=& Sum) 
%> 


同样 的 语句 ， 也 可 以 将 Do…Loop…Until 改 成 Do Until…Loop 的 写法 ， 其 效果 是 一 样 的 ， 
只 是 测试 的 条 件 在 前 或 在 后 而 已 。 如 : 


< 

Dim i Sum 

Sum=0 

i=0 

Do Until i=5 

i=i+1 

Sum=Sum+i 

Loop 

Response.Write (1+2+…+5=& Sum) 
名 > 


说 明 ， 有 时 候 ， 在 处 理 循 环 时 ， 和 希望 在 某 一 个 条 件 成 立时 ， 可 以 中 途 退 出 这 个 循环 ， 这 时 
我 们 可 以 使 用 Exit Do 的 命令 ， 若 是 在 多 重 循环 之 下 ，Exit Do 会 退出 最 近 的 循环 。 
30.6.2 ”使 用 While…Wend 

执行 While…Wend 语句 时 ， 首 先 会 测试 While 后 面 的 条 件 式 ， 当 条 件 式 成 立时 ， 执 行 循 
环 中 的 语句 ， 条 件 不 成 立时 ， 则 退出 While…Wend 循环 。 它 的 语法 如 下 : 

While (条 件 语句 ) 

执行 语句 

Wend 

说 明 : Do…ILoop 语句 提供 更 结构 化 与 灵活 性 的 方法 来 执行 循环 ， 因 此 最 好 不 要 使 用 
While…Wend 语句 ， 可 以 使 用 Do…Loop 语句 来 代替 。 
30.6.3 ”使 用 For…Next 


当 希 望 执行 循环 到 指定 的 次 数 时 ， 最 好 是 用 For…Next 循环 。For 的 语句 有 一 个 控制 变量 
counter， 它 的 初 值 为 start， 终 止 值 为 end， 每 次 增加 值 为 step， 该 变量 的 值 将 在 每 次 重复 循环 
的 过 程 中 递增 或 递减 。 
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For counter = start to end step 
执行 语句 

Next 

在 上 述 的 语法 中 ， 其 执行 步骤 如 下 : 
设置 counter 的 初 值 。 
吧 判断 counter 是 否 大 于 终止 值 (或 小 于 终止 值 ， 视 step 的 值 而 定 ) 。 
03 假如 counter 大 于 终止 值 ， 程 序 跳 至 Next 语句 的 下 一 行 执行 。 
吗 执 行 For 循环 中 的 语句 。 
号 执行 到 Next 语句 时 ， 控 制 变量 会 自动 增加 step 值 ， 若 未 指定 step 值 ， 默 认 值 为 每 次 加 1。 
三 跳 至 第 二 个 步骤 。 


VBScript 过 程 


过 程 是 VBScript 脚 本 语言 中 最 重要 的 部 分 ,为 了 使 程序 可 重复 利用 和 为 了 使 程序 简洁 明了 ， 
经 常 使 用 过 程 。 


30.7.1 ”过程 分 类 

在 VBScript 中 过 程 分 为 两 类 : Sub 过 程 和 Function 过 程 。 下 面 分 别 对 这 两 种 过 程 进行 讲述 。 

1. Sub 过 程 

Sub 过 程 是 指 包含 在 Sub 和 End Sub 语句 之 间 的 一 组 VBScript 语句 ， 执 行 操作 但 不 返回 值 。 
Sub 过 程 可 以 使 用 参数 。 如 果 Sub 过 程 无 任何 参数 ，Sub 语句 则 必须 包含 空 括号 () 。 

下 面 的 Sub 过 程 使 用 了 两 个 固有 的 VBScript 函数 ， 即 MsgBox 和 InputBox 来 提示 用 户 输 
入 信息 ， 然 后 显示 根据 这 些 信息 计算 的 结果 。 


Sub ConvertTemp () 

Temp=InputBox ( 请 输入 华氏 温度 : ，1) 
MsgBox 温度 为 ecelsius (temp) & 摄氏 度 。 
End Sub 


2. Function 过 程 

Function 过 程 是 包含 在 Function 和 End Function 语句 之 间 的 一 组 VBScript 语句 。Function 
过 程 与 Sub 过 程 类 似 ,但 是 Function 过 程 可 以 返回 值 ， 可 以 使 用 参数 。 如 果 Function 过 程 无 
任何 参数 ，Function 语句 则 必须 包含 空 括号 () 。Function 过 程 通过 函数 名 返回 一 个 值 ， 这 个 
值 是 在 过 程 的 语句 中 赋予 函数 名 的 。Function 返回 值 的 数据 类 型 总 是 Variant。 

在 下 面 的 示例 中 ，Celsius 函数 将 华氏 温度 换算 为 摄氏 度 。Sub 过 程 ConvertTemp 调用 此 函 
数 时 ， 包 含 参数 值 的 变量 将 被 传递 给 函数 ， 换 算 结 果 则 返回 到 调用 过 程 并 显示 在 消息 框 中 。 


Sub ConvertTemp () 

Temp=InputBox ( 请 输入 华氏 温度 : ,1) 
MsgBox 温度 为 scelsius (temp) & 摄氏 度 。 
End sub 

Function Celsius (fDegrees) 
Celsius=(fDegrees-32)*5/9 

End Function 
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SN ‘ 
SY oe 》 
30.7.2 ”过 程 的 输入 / 输出 

给 过 程 传递 数据 的 途径 是 使 用 参数 。 参 数 被 作为 要 传递 给 过 程 的 数据 的 占 位 符 。 参 数 名 可 
以 是 任何 有 效 的 变量 名 。 使 用 Sub 语句 或 Function 语句 创建 过 程 时 ,过程 名 之 后 必须 紧 跟 括号 。 
括号 中 包含 所 有 的 参数 ， 参 数 之 间 用 逗号 分 隔 。 如 在 下 面 的 示例 中 ，fDegrees 是 传递 给 Celsius 
函数 的 值 的 占 位 符 。 


Function Celsius (EDegrees) 
Celsius=(fDegrees-32)*5/9 
End Function 


要 想 从 过 程 获取 数据 ， 则 必须 使 用 Function 过 程 。Function 过 程 可 以 返回 值 ，Sub 过 程 不 
返回 值 。 
30.7.3 ”在 代码 中 使 用 Sub 和 Function 过 程 

调用 Function 过 程 时 ， 函 数 名 须 在 变量 赋值 语句 的 右 端 或 表达 式 中 。 

Temp=Celsius (Fdegrees) 

或 

MsgBox 温度 为 gcelsius (fDegrees)& 摄氏 度 。 


调用 Sub 过 程 时， 只 需 输 入 过 程 名 及 所 有 的 参数 值 即 可 ， 参 数值 之 间 需 使 用 逗号 分 隔 。 不 
需 使 用 Call 语句 ， 如 果 使 用 此 语句 ， 则 必须 将 所 有 的 参数 包含 在 括号 之 中 。 


VBSeript 函数 


VBScript 的 函数 有 两 种 一 种 是 内 部 函数 , 即 VBScript 自 带 的 函数 , 这 些 程序 都 已 经 包装 好 ， 
使 用 时 直接 调用 即 可 ， 另 一 种 是 自 定义 函数 ， 即 用 户 在 编程 的 过 程 中 根据 需要 定义 编辑 的 一 些 
函数 。 

VBScript 内 包括 很 多 基本 函数 ， 如 对 话 框 处 理 函 数 、 字 符 串 操 作 函 数 、 时 间 /日 期 处 理 函 
数 及 数学 函数 等 。 关 于 VBScript 具体 的 函数 参考 本 书 附录 B。 

下 面 的 实例 演示 了 时 间 /日 期 函数 的 使 用 ， 代 码 如 下 : 


<html> 

<head> 

<title> 时 间 / 日 期 函数 的 应 用 </title> 
</head> 

<body> 

时 间 : <%=time () %> 

<br> 日 期 : <%=date () %> 

<br> 时 间 和 日 期 :<%=now () %$> 

</body> 

</html> 


运行 程序 后 显示 结果 如 图 30-4 所 示 。 


sig 
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地 址 中 搬 http://127.0.0.1/ 范 例 3. asp 


现在 时 间 : 14:57:15 
今日 日 期 ，2012-10-18 
现在 时 间 和 日 期 ，2012-10-18 14:57:15 


图 30-4 时 间 / 日 期 函数 


本 章 小 结 


本 章 主要 讲述 了 网 页 脚本 语言 VBScript 概述 、 数 据 类 型 、 变 量 、 运 算 符 优先 级 、 条 件 语 句 、 
循环 语句 和 VBScript 过 程 的 使 用 。 在 本 章 ， 你 可 以 学 习 如 何 编写 VBScript， 以 及 如 何在 你 的 


HTML 文件 了 


bh 插入 这 些 代 码 ， 以 使 得 这 些 网 页 动态 性 和 交互 性 更 强 。 
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网 站 的 发 布 、 维 护 及 推广 


第 了 章 ， 网 站 的 发 布 与 维护 


网 页 制作 完毕 要 发 布 到 网 站 服务 器 上 ， 才 能 让 别人 观看 。 现 在 用 于 上 传 的 工具 有 很 多 ， 既 


可 以 采用 专门 的 FTP 工具 ， 也 可 以 采用 网 页 制作 工具 本 身 带 有 的 FTP 功能 。 由 于 市 场 在 不 断 
地 变化 ， 网 站 的 内 容 也 需要 随 之 调整 ， 给 人 常 新 的 感觉 ， 网 站 才 会 更 加 吸引 访问 者 ， 给 访问 者 
很 好 的 印象 。 这 就 要 求 对 站 点 进行 长 期 、 不 间断 的 维护 和 更 新 。 


全 测试 站 点 全 ”网 站 维护 
令 ” 检 查 链接 倒 ”网 站 的 推广 
倒 ”发 布 网 站 


之前， 应 该 在 本 地 先 对 站 点 进行 完整 的 测试 ， 例 如 检测 站 点 中 是 否 存 
， 以 找 出 其 他 可 能 存在 的 问题 。 


在 真正 构建 远 
在 错误 和 断裂 的 多 
31.1.1 检查 链接 

如 果 网 页 中 存在 错误 链接 ， 这 种 情况 是 很 难 察觉 的 。 采 用 常规 的 方法 ， 只 有 打开 网 页 ， 单 
击 链接 时 ， 才 可 能 发 现 错误 。 而 Dreamweaver 可 以 帮助 你 快速 检查 站 点 中 网 页 的 链接 ， 避 免 出 
现 链 接 错 误 ， 具 体操 作 步 又 如 下 : 

别 打开 已 创建 的 站 点 地 图 ， 选 中 一 个 文件 ， 执 行 “ 站 点 ”|“ 改 变 站 点 链接 范围 的 链接 ”命令 ， 

选择 命令 后 ， 弹 出 “更 改 整 个 站 点 链接 〈 站 点 - 效果 ) ”对 话 框 ， 如 图 31-1 所 示 。 

吗 在 “ 变 成 新 链接 ”文本 框 中 输入 链接 的 文件 ， 单 击 “ 确 定 ” 按 钮 ， 弹 出 “更 新 文件 ”对 话 框 ， 
单 击 “ 更 新 ”按钮 ， 完 成 更 改 整个 站 点 范围 内 的 链接 ， 如 图 31-2 所 示 。 


更 改 整个 站 点 链 找 (站 点 一 效果 ) 
更 改 所 有 的 链接 (H): 


lindex.htm 


变 成 新 链接 (1D); 
Hiebiao.asp 


图 31-1 “更 改 整 个 站 点 链接 ( 站 点 - 效果 ) ”对 话 框 图 31-2 “更 新 文件 ”对 话 框 


03 执行 “站 点 ”|“ 检 查 站 点 范围 的 链接 ”命令 ， 打 开 “ 链 接 检查 器 ”面板 ， 在 “显示 ”下 拉 
列表 中 选择 “ 断 掉 的 链接 ”选项 ， 如 图 31-3 所 示 。 


硒 在 “显示 ”下 拉 表 中 选择 “外 部 链接 ” 选 
项 ， 可 以 检查 出 与 外 部 网 站 链接 的 全 部 信息 ， 
如 图 31-4 所 示 。 


LE 


TREE ET REY EE | 


图 31-4 选择 “外 部 链接 ”选项 


31.1.2 ”站 点 报告 

测试 站 点 时 ， 可 以 对 当前 文档 、 选 定 的 
文件 或 整个 站 点 的 工作 流程 或 HTML 属性 ( 包 
括 辅 助 功能 ) 运行 站 点 报告 。 使 用 站 点 报告 
可 以 检查 可 合并 的 舱 套 字体 标签 、 辅 助 功能 、 
遗漏 的 替换 文本 、 宛 余 的 嵌 套 标签 、 可 删除 
的 空 标签 和 无 标题 文档 ， 具 体操 作 步 又 如 下 : 
而 执 行 “站 点 ” |“ 报告 ” 命令， 弹出“ 报告” 
对 话 框 ， 在 对 话 框 中 的 “报告 在 ”下 拉 列 表 
中 选择 “整个 当前 本 地 站 点 ”选项 ， 在 “ 选 
择 报告 ” 列表 框 中 选中 “多 余 的 嵌 套 标签 ”、 
“可 移 除 的 空 标 签 ” 和 “无 标题 文档 ” 复 选 框 ， 
如 图 31-5 所 示 。 


报 洛 
可 合并 嵌 套 字 件 标签 


图 31-5 “报告 ”对 话 框 


醒 单 击 “ 运 行 ”按钮 ，Dreamweaver 会 对 整 
个 站 点 进行 检查 。 检 查 完毕 后 ， 将 会 自动 打 


开 “ 站 点 报告 ”面板 , 在 面板 中 显示 检查 结果 ， 
如 图 31-6 所 示 。 


图 31-6 


“站 点 报告 ”面板 


31.1.3 清 


清理 文档 就 是 清理 一 些 空 标签 或 者 在 

Word 中 编辑 时 所 产生 的 一 些 多 余 的 标签 ， 具 
体操 作 步 骤 如 下 : 
三 打开 需要 清理 的 网 页 文档 。 执 行 “ 命 
令 ”|“ 清 理 HIML” 命 令 ， 弹 出 “清理 
HTML/XHTML” 对 话 框 ， 在 对 话 框 中 的 “ 移 
除 ” 选 项 组 中 选中 “ 空 标签 区 块 ”和 “多 余 
的 嵌 套 标签 ” 复 选 框 ,或 者 在 “指定 的 标签 ” 
文本 框 中 输入 所 要 删除 的 标签 ， 并 在 “选项 ” 
选项 组 中 选中 “ 尽 可 能 合并 嵌 套 的 <font> 标 
签 ” 和 “完成 后 显示 动作 记录 ” 复 选 框 ， 如 
图 31-7 所 示 。 


清理 EHTEL / XHTMD 


了 加 [可 区 顽 (QJb》 QUDZN7 下] 
回 多 余 的 朵 大 标签 
口 不 属于 Brewwewrer 的 HNL 注解 
口 brewwerrer 特殊 标记 


口 指定 的 标签- 
， 回 时 可 能 合并 谨 套 的 《font》 标 答 
回 完 志 时 旺 示 动 作 记录 


图 31-7 


醒 单 击 “ 确 定 ” 按 钮 ，Dreamweaver 自动 开 
始 清理 工作 。 清 理 完毕 后 ， 弹 出 一 个 提示 框 ， 
在 提示 框 中 显示 清理 工作 的 结果 ， 如 图 31-8 
所 示 。 


“清理 HTML/XHTML” 对 话 框 


图 31-8 显示 清理 工作 的 结果 


411 


,06 © 
A ° 


网 页 设计 与 网 站 建设 完全 实战 手册 


吗 执行“ 命令 ”| “清理 Word 生成 的 HIML?” 命令， 弹出 “清理 Word 生成 的 HTML” 对 话 框 ， 
如 图 31-9 所 示 。 
0 在 对 话 框 中 切换 到 “详细 ”选项 卡 ， 选 中 需要 的 复 选 框 ， 如 图 31-10 所 示 。 


清理 Word 生成 的 HT [a 清理 Word 生成 的 HTEL 
天 下 详细 [本 
清理 的 rh 来 自 [Ye 2000 玉 更 记 夺 本 本 Cm] 
[而 ] 


基 除 所 有 Word 特定 的 标记 
清 蛙 css 

标记 X 例如 <o:pyKe:p>) 

] yl [erdi 名 》 条 着 式 标签 和 其 内 容 

中 空 的 段落 和 边界 


ES rera ym 


清香 font 标签 
修正 无 交 的 岩 套 标签 
应 用 源 格式 目 lif 


完成 时 显示 动作 记录 


图 31-9 “清理 Word 生成 的 HTML” 对 话 框 图 31-10 “详细 ”选项 卡 
号 单 击 “ 确 定 ” 按 钮 ， 清 理工 作 完 成 后 显示 提示 框 ， 如 图 31-11 所 示 。 


Dreanweaver 


图 31-11 提示 框 


上 传 发 布 网 站 


当 网 站 制作 完成 以 后 ， 就 要 上 传 到 远程 服务 器 上 供 浏 览 者 预览 ， 这 样 所 做 的 网 页 才 会 被 别 
人 看 到 。 网 站 发 布 流程 第 一 步 : 申请 一 个 域名 ; 第 二 步 : 申请 一 个 空间 服务 器 ， 第 三 步 ， 上 传 
网 站 到 服务 器 。 

上 传 网 站 有 两 种 方法 , 一 种 是 用 Dreamweaver 自 带 的 工具 上 传 , 一 种 是 利用 FTP 软件 上 传 ， 
下 面 将 详细 讲述 使 用 LeapFTP 上 传 的 方法 。LeapFTP 是 一 款 功能 强大 的 FTP 软件 ， 具 有 友好 
的 用 户 界面 、 稳 定 的 传输 速度 ， 连 接 更 加 方便 。 支持 断 点 续 传 功能 ， 可 以 下 载 或 上 传 整个 目录 ， 
也 可 直接 删除 整个 目录 。 
呵 下 载 并 安装 最 新 的 LeapFTP 软件 ， 运 行 LeapFTP， 执 行 “ 站 点 ”|“ 站 点 管理 器 ”命令 ， 如 
图 31-12 所 示 。 
咀 弹 出 “站 点 管理 器 ”对 话 框 , 在 对 话 框 中 执行 “站 点 ”|“ 新 建 ”|“ 站 点 ”命令 , 如 图 31-13 所 示 。 
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图 31-12 执行 “站 点 管理 器 ”命令 图 31-13 执行 新 建站 点 命令 


本 在 弹出 的 对 话 框 中 输入 你 喜欢 的 站 点 名 称 ， 如 图 31-14 所 示 。 

现 单 击 “ 确 定 ”按钮 后 ， 返 回 “ 站 点 管理 器 ”对 话 框 。 在 “地 址 ”文本 框 中 输入 站 点 地 址 ， 
取消 选中 “匿名 登录 ” 复 选 框 ， 在 “用 户 名 ”文本 框 中 输入 FTP 用 户 名 ， 在 “密码 ”文本 框 
中 输入 FTP 密码 ， 如 图 31-15 所 示 。 


图 31-14 输入 站 点 名 称 图 31-15 输入 站 点 地 址 和 密码 


酌 单 击 “ 连 接 ” 按 钮 ， 直 接 进 入 连接 状态 ， 左 侧 列表 框 为 本 地 目录 ， 可 以 选择 你 要 上 传 文件 
的 目录 , 选择 要 上 传 的 文件 , 并 右 击 , 在 弹出 的 快捷 菜单 中 选择 上传 ”命令 , 如 图 31-16 所 示 。 
区 这 时 在 队列 栏 里 会 显示 正在 上 传 及 未 上 传 的 文件 ， 当 文件 上 传 完 成 后 ， 此 时 在 右 侧 的 远程 
目录 栏 里 就 可 以 看 到 你 上 传 的 文件 了 ， 如 图 31-17 所 示 。 


agree 
leat- 0 Pa Nba 0 AAA Ole 
mr 下 BE mm ] ges 


Ht 
Er = 
ET DE 
Er 3| sm- 
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ma | FHT ER | FT ST ET eT ERT 
rE 


图 31-17 文件 上 传 成 功 


ie TREETERT 
5 到 


图 31-16 选择 “上 传 ”命令 
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网 站 维护 


一 个 好 的 网 站 ， 是 不 可 能 一 次 就 制作 完美 的 ， 由 于 市 场 在 不 断 地 变化 ， 网 站 的 内 容 也 需要 
随 之 调整 ， 给 人 常 新 的 感觉 ， 网 站 才 会 更 加 吸引 访问 者 ， 给 访问 者 很 好 的 印象 。 这 就 要 求 对 站 
点 进行 长 期 不 间断 的 维护 和 更 新 。 


31.3.1 ”网 站 内 容 的 更 新 

对 于 网 站 来 说 ， 只 有 不 断 地 更 新 内 容 ， 才 能 保证 网 站 的 生命 力 ， 否 则 网 站 不 仅 不 能 起 到 应 
有 的 作用 ， 反 而 会 对 企业 自身 形象 造成 不 良 影响 。 如 何 快捷 方便 地 更 新 网 页 ， 提 高 更 新 效率 ， 
是 很 多 网 站 面临 的 难题 。 现 在 网 页 制作 工具 不 少 ， 但 为 了 更 新 信息 而 日 复 一 日 地 编辑 网 页 ， 对 
网 站 维护 人 员 来 说 ， 疲 于 应 付 是 普遍 存在 的 问题 。 

内 容 更 新 是 网 站 维护 过 程 中 的 重要 一 环 。 可 以 考虑 从 以 下 5 个 方面 入 手 ， 使 网 站 能 长 期 顺 
利 地 运转 。 

第 一 ， 在 网 站 建设 初期 ， 就 要 对 后 续 维护 给 予 足够 的 重视 ， 要 保证 网 站 后 续 维护 所 需 资金 
和 人 力 。 很 多 网 站 建设 时 很 舍得 投入 资金 。 可 是 网 站 发 布 后 ， 维 护 力度 不 够 ,信息 更 新 工作 迟 
迟 跟 不 上 。 网 站 建成 之 时 ， 便 是 网 站 死亡 的 开始 。 

第 二 ， 要 从 管理 制度 上 保证 信息 渠道 的 通畅 和 信息 发 布 流 程 的 合理 性 。 网 站 上 各 栏目 的 信 
息 往 往来 源 于 多 个 业务 部 门 ， 要 进行 统筹 考虑 ， 确 立 一 套 从 信息 收集 、 信 息 审查 到 信息 发 布 的 
良性 运转 的 管理 制度 。 既 要 考虑 信息 的 准确 性 和 安全 性 ， 又 要 保证 信息 更 新 的 及 时 性 。 要 解决 
好 这 个 问题 ， 领 导 的 重视 是 前 提 。 

第 三 ， 在 建设 过 程 中 要 对 网 站 的 各 个 栏目 和 子 栏目 进行 尽量 细致 的 规划 ， 在 此 基础 上 确定 
哪些 是 经 常 要 更 新 的 内 容 ， 哪 些 是 相对 稳定 的 内 容 。 根 据 相 对 稳定 的 内 容 设计 网 页 模板 ， 在 以 
后 的 维护 工作 中 ， 这 些 模板 不 用 改动 ， 这 样 既 省 费用 ， 又 有 利于 后 续 维护 。 

第 四 ， 对 经 常 变更 的 信息 ， 尽 量 建立 数据 库 管理 ， 以 避免 数据 杂乱 无 章 的 现象 。 如 果 采 用 
基于 数据 库 的 动态 网 页 方案 ， 则 在 网 站 开发 过 程 中 ， 不 但 要 保证 信息 浏览 的 方便 性 ， 还 要 保证 
信息 维护 的 方便 性 。 

第 五 ， 要 选择 合适 的 网 页 更 新 工具 。 信 息 收集 起 来 后 ， 如 何 制 作 网 页 ， 采 用 不 同 的 方法 ， 
效率 也 会 大 大 不 同 。 比 如 使 用 NotePad 直接 编辑 HTML 文档 与 用 Dreamweaver 等 可 视 化 工具 
相 比 ， 后 者 的 效率 自然 高 得 多 。 若 既 想 把 信息 放 到 网 页 上 ， 又 想 把 信息 保存 起 来 以 备 以 后 再 用 ， 
那么 使 用 能 够 把 网 页 更 新 和 数据 库 管理 结合 起 来 的 工具 效率 会 更 高 。 


31.3.2 ”网 站 风格 的 更 新 


网 站 风格 的 更 新 包括 版 面 、 配 色 等 各 方面 。 改 版 后 的 网 站 让 客户 感觉 改头换面 , 焕然一新。 
一 般 改 版 的 周期 要 长 一 些 。 如 果 客 户 对 网 站 也 满意 的 话 ， 改 版 可 以 延长 到 几 个 月 甚至 半年 。 改 
版 周期 不 能 太 短 。 一 般 一 个 网 站 建设 完成 以 后 ， 代 表 了 公司 的 形象 和 公司 的 风格 。 随 着 时 间 的 
推移 ， 很 多 客户 对 这 种 形象 已 经 形成 了 定 势 。 如 果 经 常 改版 ， 会 让 客户 感觉 不 适应 ， 特 别 是 那 
种 彻底 改变 风格 的 “改版 ”。 当 然 如 果 对 公司 网 站 有 更 好 的 设计 方案 ， 可 以 考虑 改版 。 毕 竟 长 
期 使 用 一 种 版 面 会 让 人 感觉 陈旧 、 厌 烦 。 
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31.3.3 ”网 站 备份 


作为 一 个 网 站 的 拥有 着 和 管理 者 , 网 站 是 我 们 最 大 的 财富 , 在 面 对 错综复杂 的 网 络 环境 时 ， 
必须 保证 网 站 的 正常 运作 ， 但 很 多 的 情况 是 我 们 无 法 掌控 和 预测 的 ， 如 黑客 的 入 侵 、 硬 件 的 损 
坏 、 人 为 的 误 操 作 等 ， 都 可 能 对 网 站 产生 毁灭 性 的 打击 。 所 以 ， 我 们 应 该 定期 备份 网 站 数据 ， 
在 遇 到 上 述 意 外 时 能 将 损失 降低 到 最 小 。 网 站 备份 并 不 复杂 ， 可 以 通过 网 站 系统 自 带 的 一 些 备 
份 功能 轻松 实现 备份 ， 最 重要 的 就 是 建立 起 网 站 备份 的 观念 和 习惯 。 

1. 整 站 的 备份 

对 于 网 站 文件 的 备份 ， 也 可 以 说 是 整 站 目录 的 备份 。 一 般 在 网 站 文件 有 变动 的 情况 下 ， 一 
定 要 备份 一 次 ， 如 网 站 模板 的 变更 、 网 站 功能 的 增删 ， 这 类 备份 的 目的 主要 是 担心 网 站 文件 的 
变动 引起 整 站 的 不 稳定 或 造成 网 站 其 他 功能 和 文件 的 丢失 。 一 般 来 说 ， 由 于 文件 的 变动 频率 较 
小 ， 备 份 的 周期 相对 较 长 ， 可 以 在 每 次 变动 网 站 相关 文件 前 ， 进 行 网 站 文件 的 备份 。 对 于 网 站 
文件 或 者 说 整 站 目录 的 备份 ， 一 般 可 以 通过 远程 目录 打包 的 方式 ， 将 整 站 目录 打包 并 且 下 载 到 
本 地 ， 这 种 方式 是 最 简便 的 。 而 对 于 一 些 大 型 网 站 来 说 ， 网 站 目录 包含 大 量 的 静态 页 面 、 图 片 
和 其 他 的 一 些 应 用 程序 , 可 以 通过 FTP 数据 备份 工具 , 将 网 站 目录 下 的 相关 文件 直接 下 载 到 本 地 ， 
根据 备份 时 间 在 本 地 实现 定期 打包 和 替换 。 这 样 可 以 最 大 限度 地 保证 网 站 的 安全 性 和 完整 性 。 

2. 数据 库 的 备份 

数据 库 对 于 一 个 网 站 来 说 ， 其 重要 性 不 言 而 喻 。 网 站 文件 损坏 ， 可 以 通过 一 些 技术 还 原 手 
段 来 实现 ， 如 模板 文件 丢失 ， 我 们 换 一 套 模 板 ， 网 站 文件 丢失 ， 我 们 可 以 再 重新 安装 一 次 网 站 
程序 ， 但 如 果 数 据 库 丢 失 ， 相 信 技 术 再 强 的 站 长 也 无 力 回 天 。 相 对 于 网 站 数据 库 而 言 ， 变 动 的 
频率 就 很 大 了 ， 备 份 的 频率 相对 来 说 会 更 频繁 一 些 。 一 般 一 些 服务 较 好 的 IDC， 通 常 是 每 周 帮 
忙 备份 一 次 数据 库 。 对 于 一 些 运用 建站 CMS 做 网 站 的 站 长 来 说 ， 在 后 台 都 有 非常 方便 的 数据 
库 一 键 备份 ， 通 过 自动 备份 到 指定 的 网 站 文件 夹 当中 。 如 果 你 还 不 放心 ， 可 以 使 用 FTP 工具 ， 
将 远程 的 备份 数据 库 下 载 到 本 地 ， 真 正 实现 数据 库 的 本 地 、 异 地 双 备 份 。 


网 络 安全 防范 措施 


目前 90% 以 上 的 流行 计算 机 病毒 都 是 通过 网 络 进行 传播 的 。 计 算 机 病毒 具有 破坏 性 ， 它 
将 影响 计算 机 的 正常 运行 ， 甚 至 损坏 计算 机 硬件 。 为 了 保障 系统 的 正常 运行 ， 维 护 网 络 安全 ， 
要 求 管理 员 必须 具备 一 定 的 反 黑 客 技术 。 下 面 简 要 介绍 目前 常见 的 几 种 网 络 安全 防范 措施 。 


31.4.1 防火墙 技 术 


如 果 有 条 件 ， 安 装 个 人 防火 墙 以 抵御 黑客 的 袭击 。 所 谓 防火 墙 ， 是 指 一 种 将 内 部 网 和 公众 
访问 网 〈Intemet) 分 开 的 方法 ， 实 际 上 是 一 种 隔离 技术 。 防 火 墙 是 在 两 个 网 络 通信 时 执行 的 一 
种 访问 控制 尺度 ， 它 能 允许 “同意 ”的 人 和 数据 进入 网 络 ， 同 时 将 “不 同意 ”的 人 和 数据 拒 之 
门 外 ， 最 大 限度 地 阻止 网 络 中 的 黑客 来 访问 网 络 ， 防 止 他 们 更 改 、 复 制 、 毁 坏 重要 信息 。 

防火 墙 安 装 和 投入 使 用 后 ， 并 非 万 事 大 吉 。 要 想 充 分 发 挥 它 的 安全 防护 作用 ， 必 须 进行 跟 
踪 和 维护 ， 要 与 商家 保持 密切 的 联系 ， 时 刻 注视 商家 的 动态 。 因 为 商家 一 旦 发 现 其 产品 存在 安 
全 漏洞 ， 就 会 尽快 发 布 补 救 产品 ， 此 时 应 尽快 确认 真 伪 《〈 防 止 特洛伊 木马 等 病毒 ) ， 并 对 防火 
墙 进行 更 新 。 在 理想 的 情况 下 ， 一 个 好 的 防火 墙 应 该 能 把 各 种 安全 问题 在 发 生 之 前 解决 。 目 前 
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网 页 设计 与 网 站 建设 完全 实战 手册 


各 家 杀毒 软件 的 厂商 都 会 提供 个 人 版 防火 墙 软件 ， 防 病毒 软件 中 都 含有 个 人 防火 墙 ， 所 以 可 用 
同一 张 光盘 运行 安装 个 人 防火 墙 ， 在 安装 防火 墙 后 一 定 要 根据 需求 进行 详细 配置 。 合 理 设 置 防 
火 墙 后 应 能 防范 大 部 分 的 蠕虫 入 侵 。 


31.4.2 ”网 络 加 密 技术 


在 网 络 中 ， 加 密 就 是 把 数据 和 信息 〈 称 为 明文 ) 转换 为 不 可 辨识 形势 〈 密 文 ) 的 过 程 。 使 
不 应 了 解 该 数据 和 信息 的 人 不 能 够 知道 和 识别 。 欲 知 密 文 的 内 容 ， 需 将 其 转变 为 明文 ， 这 就 是 
解密 过 程 。 

在 网 络 上 进行 数据 交换 的 数据 主要 面临 着 以 下 4 种 威胁 : 

。 ”截获 一 从 网 络 上 监听 他 人 进行 交换 的 信息 的 内 容 。 

。 中断 一 一 有 意 中 断 他 人 在 网 络 上 传输 的 信息 。 

。 ” 算 改 一 一 故意 算 改 网 络 上 传送 的 信息 。 

。 ”伪造 一 一 伪造 信息 后 在 网 络 上 传送 。 

其 中 截获 信息 的 攻击 称 为 被 动 攻击 ， 而 中 断 、 更 改 和 伪造 信息 的 攻击 都 称 为 主动 攻击 。 但 
是 无 论 是 主动 攻击 ， 还 是 被 动 攻击 ， 都 是 在 信息 传输 的 两 个 端点 之 间 进 行 的 ， 即 源 站 和 目的 站 
之 间 。 

加 密 技术 是 电子 商务 采取 的 主要 安全 保密 措施 ， 是 最 常用 的 安全 保密 手段 ， 利 用 技术 手段 
把 重要 的 数据 变 为 乱码 加密》 传送， 到 达 目 的 地 后 再 用 相同 或 不 同 的 手段 还 原 〈 解 密 〉 。 加 
密 技术 的 应 用 是 多 方面 的 ， 但 最 为 广泛 的 还 是 在 电子 商务 和 VPN 上 的 应 用 ， 深 受 广大 用 户 的 
喜爱 。 


31.4.3 ”网 络 安全 管理 

计算 机 网 络 是 人 们 通过 现代 信息 技术 手段 了 解 社会 、 获 取信 息 的 重要 手段 和 途径 。 网 络 安 
全 管理 是 人 们 能 够 安全 上 网 、 绿 色 上 网 、 健 康 上 网 的 根本 保证 。 做 好 网 络 安全 必须 有 一 个 精通 
网 络 的 “专家 一 一 做 好 安全 管理 ”。 

1. 杜绝 病毒 来 源 

俗话 说 : “ 病 从 口 入 ”， 了 解 病毒 的 来 源 是 防止 病毒 最 重要 的 一 个 环节 。 因 此 ， 日 常 操作 
中 应 注意 : 文件 以 软盘 、 光 盘 、 网 络 共享 和 电子 邮件 等 方式 存 入 主机 前 ， 应 确定 是 否 带 有 病毒 ， 
并 用 杀毒 软件 查 杀 后 再 使 用 。 

2. 数据 备份 

对 系统 中 重要 的 数据 进行 备份 ， 以 便 系统 受 计 算 机 病毒 感染 、 导 致 系统 崩溃 时 进行 恢复 。 

3. 避免 从 软驱 或 光驱 启动 

很 多 引导 型 病毒 是 在 软驱 或 者 光驱 启动 时 感染 的 ， 如 果 计 算 机 不 设 定 从 软驱 或 光驱 启动 ， 
可 以 有 效 地 降低 感染 引导 型 病毒 的 机 率 ， 在 CMOS 中 将 系统 设 为 仅 从 硬盘 启动 就 可 以 了 。 

4. 防止 宏 病 毒 

尽量 不 要 打开 来 历 不 明 的 文件 或 模板 ; 在 低 版 本 的 Word、Excel 和 PowerPoint 中 将 “ 宏 病 
毒 防护 ”选项 打开 ，Office 可 以 自动 侦 测 Word、Excel 和 PowerPoint 等 文件 中 是 否 含有 宏 功 能 ， 
并 提示 用 户 在 确认 无 毒 之 后 再 打开 。 
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5. 预防 E-mail 病毒 

通过 E-mail 携带 的 可 执行 文件 ， 如 扩展 名 为 .exe 的 程序 文件 、 含 宏 的 文件 及 脚本 语言 等 
都 有 可 能 是 病毒 的 藏身 之 处 ， 只 要 执行 带 病毒 的 可 执行 文件 ， 就 会 提高 中 毒 的 机 率 。 因 此 ， 不 
要 随便 打开 来 历 不 明 的 电子 邮件 或 电子 邮件 中 的 附件 。 如 果 使 用 Outlook/Outlook Express 收发 
电子 邮件 ， 建 议 关 闭 信 件 预 览 功 能 。 

6. 安装 杀毒 软件 

安装 杀毒 软件 是 防止 病毒 最 有 效 的 措施 之 一 。 如 果 仅 仅 安装 杀毒 软件 而 不 定期 更 新 病毒 库 
或 扫描 计算 机 里 的 各 个 文件 、 文 件 夹 ， 病 毒 还 是 有 潜伏 在 计算 机 中 并 伺机 而 动 的 可 能 。 因 此 ， 
不 仅 要 定期 全 面 扫描 ， 而 且 还 要 随时 更 新 病毒 库 。 


31.4.4 ”防范 木马 程序 

由 于 计算 机 系统 和 信息 网 络 系统 本 身 固 有 的 脆弱 性 ， 越 来 越 多 的 网 络 安全 问题 开始 困扰 着 
我 们 ， 特 别 是 在 此 基础 上 发 展 起 来 的 计算 机 病毒 、 计 算 机 木马 等 非法 程序 ， 利 用 网 络 技术 窃取 
他 人 信息 和 成 果 ， 造 成 现实 社会 与 网 络 空间 秩序 的 严重 混乱 。 

木马 是 隐藏 在 合法 程序 中 的 未 授权 程序 ， 这 个 隐藏 的 程序 完成 用 户 不 知道 的 功能 。 当 合法 
的 程序 被 植 入 了 非 授权 代码 后 就 认为 是 森马。 木马 的 目的 是 不 需要 管理 员 的 准许 就 可 获得 系统 
使 用 权 。 木 马 种 类 很 多 , 但 它 的 基本 构成 却 是 一 样 的 ， 由 服务 器 程序 和 控制 器 程序 两 部 分 组 成 。 
它 表面 上 能 提供 一 些 有 用 的 ， 或 是 仅仅 令 人 感 兴趣 的 功能 ， 但 在 内 部 还 有 不 为 人 所 知 的 其 他 功 
能 ， 如 复制 文件 或 窃取 密码 等 。 严 格 意义 上 来 说 ， 木 马 不 能 算是 一 种 病毒 ， 但 它 又 和 病毒 一 样 ， 
具有 隐蔽 性 、 非 授权 性 及 危害 性 等 特点 ， 因 此 也 有 不 少 人 称 木马 为 黑客 病毒 。 

计算 机 木马 程序 已 经 严重 影响 到 各 类 计算 机 使 用 者 的 切身 利益 ， 当 前 最 重要 的 是 如 何 有 效 
地 防范 木马 的 攻击 。 

1. 使 用 防火 墙 阻止 木马 侵入 

防火 墙 是 抵挡 木马 入 侵 的 第 一 道门 ， 也 是 最 好 的 方式 。 绝 大 多 数 木 马 都 是 必须 采用 直接 通 
信 的 方式 进行 连接 ， 防 火 墙 可 以 阻塞 拒绝 来 源 不 明 的 数据 包 。 防 火 墙 完全 可 以 进行 数据 包 过 滤 
检查 , 在 适当 规则 的 限制 下 , 如 对 通信 端口 进行 限制 ,只 允许 系统 接受 限定 几 个 端口 的 数据 请 求 ， 
这 样 即 使 木马 植 入 成 功 ， 攻 击 者 也 无 法 进入 到 系统 ， 因 为 防火 墙 把 攻击 者 和 木马 分 隔 开 来 了 。 

2. 避免 下 载 使 用 免费 或 盗版 软件 

计算 机 上 的 木马 程序 ， 主 要 来 源 有 两 种 。 第 一 种 是 不 小 心 下 载运 行 了 包含 有 木马 的 程序 。 
绝 大 多 数 计算 机 使 用 者 都 习惯 于 从 网 上 下 载 一 些 免费 或 者 盗版 的 软件 使 用 ， 这 些 软 件 一 方面 为 
广大 的 使 用 者 提供 了 方便 ， 节 省 了 资金 ， 另 一 方面 也 有 一 些 不 法 分 子 利用 消费 者 的 这 种 消费 心 
理 ， 在 免费 、 盗 版 软件 中 加 载 木马 程序 ， 计 算 机 使 用 者 在 不 知情 的 情况 下 贸然 运行 这 类 软件 ， 
进而 受到 木马 程序 的 攻击 。 还 有 一 种 情况 是 ，“ 网 友 ” 上 传 在 网 页 上 的 “好 玩 ” 的 程序 。 所 以 ， 
使 用 者 定 要 小 心 ， 要 和 弄 清楚 了 是 什么 程序 以 后 再 运行 。 

3. 安全 设置 浏览 器 

设置 安全 级 别 , 关 掉 Cookies。Cookies 是 在 浏览 过 程 中 被 有 些 网 站 往 硬 盘 写 入 的 一 些 数据 ， 
它们 记录 下 用 户 的 特定 信息 ， 因 此 当 用 户 回 到 这 个 页 面 上 时 ， 这 些 信 息 就 可 以 被 重新 利用 。 但 
是 关注 Cookies 的 原因 不 是 因为 可 以 重新 利用 这 些 信息 ,而 是 关心 这 些 被 重新 利用 信息 的 来 源 
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硬盘 。 所 以 要 格外 小 心 ， 可 以 关 掉 这 个 功能 。 步 骤 如 下 : 选择 “工具 ”菜单 下 的 “Internet 选项 ” 
命令 , 选择 其 中 的 “安全 ”选项 卡 , 就 可 以 为 不 同 区 域 的 Web 内 容 指定 安全 设置 。 单 击 下面 的 “ 自 
定义 级 别 ”， 可 以 看 到 对 Cookies 和 JAVA 等 不 安全 因素 的 使 用 限制 。 

4. 加 强 防毒 能 

只 要 上 网 就 有 可 能 受到 木马 攻击 ， 但 是 并 不 是 说 没有 办 法 来 解决 。 在 计算 机 上 安装 杀毒 软 
件 就 是 其 中 一 种 方法 ， 有 了 防毒 软件 的 确 会 减少 受伤 的 几率 。 但 在 防毒 软件 的 使 用 中 ， 要 尽量 
使 用 正版 ， 因 为 很 多 盗版 自身 就 携带 有 木马 或 病毒 ， 且 不 能 升级 。 新 的 木马 和 病毒 一 出 来 ， 唯 
一 能 控制 它 蔓 延 的 就 是 不 断 地 更 新 防毒 软件 中 的 病毒 库 。 除 了 防毒 软件 的 保护 ， 还 可 以 多 运行 
一 些 其 他 软件 。 如 天 网 ， 它 可 以 监控 网 络 之 间 正 常 的 数据 流通 和 不 正常 的 数据 流通 ， 并 随时 对 
用 户 发 出 相关 提示 ; 如 果 怀 疑 染 了 木马 的 时 候 ， 还 可 以 从 网 上 下 载 木 马克 星 来 彻底 扫描 木马 
保护 系统 的 安全 。 


优化 网 站 结构 


我 们 应 该 知道 优化 的 第 一 步 是 从 站 内 做 起 ， 不 管 你 的 网 站 是 刚刚 上 线 ， 还 是 优化 到 一 半 ， 
都 需要 对 站 内 进行 优化 ,站 内 优化 好 了 ,站 外 的 推广 才 更 能 事半功倍 。 优 化 网 站 结构 有 两 方面 
一 是 物理 结构 ， 二 是 逻辑 结构 。 

1， 网 站 物理 结构 

网 站 物理 结构 指 的 是 网 站 真实 的 目录 及 文件 所 存储 的 位 置 所 决定 的 结构 。 

一 般 来 说 ， 比 较 好 的 物理 结构 可 以 有 两 种 ， 一 是 扁平 式 的 ， 也 就 是 所 有 网 页 都 存在 网 站 根 
目录 下 。 像 这 样 ， 

http://www.domain.com/pagea.html 

http://www.domain.com/pageb.html 

http://www.domain.com/pagec.html 


所 有 这 些 页 都 是 在 根 目 录 这 一 级 别 ， 形 成 一 个 扁平 的 物理 结构 。 

这 比较 适合 于 小 型 的 网 站 ， 因 为 如 果 太 多 文件 都 放 在 根 目录 下 的 话 ， 制 作 和 维护 起 来 都 比 
较 麻 烦 ， 容 易 搞 乱 。 

第 二 种 就 是 树 形 结构 ， 也 就 是 根 目录 下 分 成 多 个 频道 ， 或 者 叫 类 别 、 目 录 等 ， 无 论 名 称 是 
什么 ， 都 是 一 个 意思 ， 然 后 在 每 一 个 频道 下 面 再 放 上 属于 这 个 频道 的 网 页 。 比 如 频道 分 为 

http:/www.domain.comycatl/ 

http://www.domain.com/cat2/ 

http://www.domain.com/cat3/ 

在 频道 下 再 放 入 具体 的 内 容 网 页 : 

http://www.domain.com/catl/pagea.html 

http://www.domain.com/catl/pageb.html 

http://www.domain.com/catl/pagec.html 
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2. 网 站 逻辑 结构 

网 站 结构 的 第 二 个 意义 指 的 是 逻辑 结构 或 链接 结构 ， 也 就 是 由 网 页 内 部 链接 所 形成 的 逻辑 
的 或 链接 的 网 络 图 。 

比较 好 的 情况 是 逻辑 结构 与 前 面 的 树 形 物 理 结构 相 吻 合 ， 也 就 是 说 ， 主 页 链接 向 所 有 的 频 
道 主页 。 

主页 一 般 不 直接 链接 向 内 容 页 ， 除 非 是 你 非常 想 推出 的 几 个 特殊 的 页 。 所 有 频道 主页 都 链 
向 其 他 频道 主页 , 频道 主页 都 链接 回 网 站 主页 。 频道 主页 也 链接 向 属于 自己 本 身 频道 的 内 容 页 ， 
一 般 不 链接 向 属于 其 他 频道 的 内 容 页 。 

所 有 内 容 页 都 链 向 网 站 主页 。 所 有 内 容 页 也 都 链接 向 自己 的 上 一 级 频道 主页 。 内 容 页 可 以 
链接 向 同一 个 频道 的 其 他 内 容 页 。 内 容 页 一 般 不 链接 向 其 他 频道 的 内 容 页 ， 在 某 些 情况 下 ， 内 
容 页 可 以 用 适当 的 关键 词 链接 向 其 他 频道 的 内 容 页 频道 形成 分 主题 。 

前 面 的 这 种 逻辑 的 或 链接 的 网 络 可 以 与 物理 结构 重合 ， 也 可 以 不 一 样 。 比 如 扁平 式 的 物理 
结构 网 站 也 完全 可 以 通过 链接 形成 逻辑 上 的 树 型 结构 。 

对 搜索 引擎 来 说 ， 更 重要 的 是 由 链接 形成 的 逻辑 结构 。 

有 不 少 人 认为 物理 结构 比较 深 的 网 页 不 容易 被 搜索 引擎 收录 。 比 如 : 

http://www.domain.com/catl/catl-l/catl-1-1/pagea.html 

像 这 样 目录 结构 比较 深 的 网 页 ， 是 不 是 就 不 容易 被 收录 呢 ? 不 一 定 ， 如 果 这 个 页 在 网 站 的 
主页 上 有 一 个 链接 ， 对 搜索 引擎 来 说 它 就 只 是 一 个 仅 次 于 主页 的 二 级 网 页 。 

收录 得 容易 与 否 是 在 于 离 主页 有 几 次 单 击 的 距离 ， 而 不 是 它 的 物理 位 置 。 对 稍 有 些 规模 的 
网 站 来 说 ， 一 般 树 形 逻 辑 结构 的 网 站 是 比较 好 的 。 
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第 之 章 网 站 的 宣传 推广 


网 站 推广 就 是 以 国际 互联 网 为 基础 ， 利 用 数字 化 的 信息 和 网 络 媒体 的 交互 性 来 辅助 营销 目 


标 实现 的 一 种 新 型 的 市 场 营销 方式 。 简 单 地 说 ， 网 站 推广 就 是 以 互联 网 为 主要 手段 进行 的 ， 为 
达到 一 定 营销 目的 的 推广 活动 。 


令 ”注册 到 搜索 引擎 全 发 布 信息 推广 
令 ”导航 网 站 登录 全 ”传统 媒体 广告 
令 友情 链接 令 ”电子 邮件 

会 网络 广告 


注册 到 搜索 引擎 


搜索 引擎 注册 是 最 经 典 、 最 常用 的 网 站 推广 手段 。 当 一 个 网 站 发 布 到 互联 网 上 之 后 ， 如 果 
希望 别人 通过 搜索 引擎 找到 你 的 网 站 ， 就 需要 进行 搜索 引擎 注册 。 
32.1.1 搜索 引擎 

据 统计 ， 信 息 搜索 已 成 为 互联 网 最 重要 的 应 用 。 并 且 随 着 技术 的 进步 ， 搜 索 效率 不 断 提高 ， 
用 户 在 查询 资料 时 不 仅 越 来 越 依 赖 于 搜索 引擎 ， 而 且 对 搜索 引擎 的 信任 度 也 日 渐 提 高 。 有 了 如 
此 雄厚 的 用 户 基础 ， 利 用 搜索 引擎 宣传 企业 形象 和 产品 服务 当然 能 获得 极 好 的 效果 。 

在 搜索 引擎 中 检索 信息 都 是 通过 输入 关键 词 来 实现 的 。 因 此 在 登录 搜索 引擎 时 一 定 要 填写 
好 关键 词 。 那 么 如 何 才 能 找到 最 适合 你 的 关键 词 呢 ? 

首先 ， 要 仔细 揣摩 潜在 客户 的 心理 ， 设 想 他 们 在 查询 与 网 站 有 关 的 信息 时 最 可 能 使 用 的 关 
键 词 ， 并 一 一 将 这 些 词 记 下 来 。 不 必 担 心 列 出 的 关键 词 太 多 ， 相 反 找 到 的 关键 词 越 多 ， 和 覆盖 面 
也 越 大 ， 也 就 越 有 可 能 从 中 选 出 最 佳 的 关键 词 。 

搜索 引擎 上 的 信息 针对 性 都 很 强 。 用 搜索 引擎 查找 资料 的 人 都 是 对 某 一 特定 领域 感 兴趣 的 
和 群体， 所 以 愿意 花费 精力 找到 网 站 的 人 ， 往 往 很 有 可 能 就 是 渴望 已 久 的 客户 。 而 且 不 用 强迫 别 
人 接受 提出 要 求 的 信息 ， 相 反 ， 如 果 客 户 确 实 有 某 方面 的 需求 ， 他 就 会 主动 找 上 门 来 。 

如 图 32-1 所 示 是 在 百度 搜索 引擎 登录 网 站 。 注 册 时 尽量 详尽 地 填写 企业 网 站 中 的 信息 ， 
特别 是 关键 词 ， 尽 量 写 得 普遍 化 、 大 众 化 一 些 ， 如 “公司 资料 ”最 好 写成 “公司 简介 ”。 


图 32-1 在 百度 搜索 引擎 登录 网 站 


32.1.2 搜索 引 警 的 原理 


搜索 引擎 ， 通 常 指 的 是 收集 了 因特网 上 
几 千 万 到 几 十 亿 个 网 页 并 对 网 页 中 的 每 一 个 
词 〈 即 关键 词 》 进行 索引 ， 建 立 索引 数据 库 
的 全 文 搜索 引擎 。 当 用 户 查 找 某 个 关键 词 的 
时 候 ， 所 有 在 页 面 内 容 中 包含 了 该 关键 词 的 
网 页 都 将 作为 搜索 结果 被 搜 出 来 。 在 经 过 复 
杂 的 算法 进行 排序 后 ， 这 些 结果 将 按照 与 搜 
索 关 键 词 的 相关 度 高 低 ， 依 次 排列 。 根 据 自 
己 的 优化 程度 ， 获 得 相应 的 名 次 。 如 图 32-2 
所 示 是 搜索 引擎 的 工作 原理 。 


容 户 江 济 上 路 |: 


;图 中 : 
1 一 > 表示 教 据 库 的 更 新 
;一 地 表示 检索 的 查询 过 程 
;区 表示 浏览 Web 页 面 


搜索 引擎 主机 


图 32-2 搜索 引擎 的 工作 原理 


在 搜索 引擎 的 后 台 ， 有 一 些 用 于 搜集 网 
页 信息 的 程序 。 所 收集 的 信息 一 般 是 能 表明 
网 站 内 容 〈 包 括 网 页 本 身 、 网 页 的 URL 地 址 、 
构成 网 页 的 代码 及 进出 网 页 的 连接 ) 的 关键 


词 或 者 短语 。 接 着 将 这 些 信 息 的 索引 存放 到 
数据 库 中 。 


32.1.3 ”搜索 引擎 分 类 


搜索 引擎 包括 全 文 索引 、 目 录 索 引 、 元 
搜索 引擎 、 垂 直 搜 索引 擎 、 集 合式 搜索 引擎 、 
门户 搜索 引擎 等。 

1. 全 文 索引 

全 文 搜索 引擎 是 目前 广泛 应 用 的 主流 搜 
索引 擎 ， 国 外 代表 有 Google， 国 内 则 有 著名 
的 百度 。 它 们 从 互联 网 提取 各 个 网 站 的 信息 ， 
建立 起 数据 库 ， 并 能 检索 与 用 户 查 询 条 件 相 
匹配 的 记录 ， 按 一 定 的 排列 顺序 返回 结果 。 

根据 搜索 结果 来 源 的 不 同 ， 全 文 搜索 引 
区 可 分 为 两 类 ， 一 类 拥有 自己 的 检索 程序 ， 
能 自 建 网 页 数据 库 ， 搜 索 结果 直接 从 自身 的 
数据 库 中 调用 ， 上 面 提 到 的 Google 和 百度 就 
属于 此 类 ; 另 一 类 则 是 租用 其 他 搜索 引擎 的 
数据 库 ， 并 按 自 定 的 格式 排列 搜索 结果 。 

当 用 户 以 关键 词 查找 信息 时 ， 搜 索引 擎 
会 在 数据 库 中 进行 搜寻 ， 如 果 找 到 与 用 户 要 
求 内 容 相符 的 网 站 ， 便 采用 特殊 的 算法 一 
通常 根据 网 页 中 关键 词 的 匹配 程度 、 出 现 的 
位 置 、 频 次 、 链 接 质量 一 “计算 出 各 网 页 的 
相关 度 及 排名 等 级 ， 然 后 根据 关联 度 高 低 ， 
按 顺 序 将 这 些 网 页 链接 返回 给 用 户 。 这 种 引 
擎 的 特点 是 搜索 率 比较 高 。 

2， 目录 索引 

虽然 有 搜索 功能 ， 但 严格 意义 上 不 能 称 
为 真正 的 搜索 引擎 ， 只 是 按 目录 分 类 的 网 站 
链接 列表 而 已 。 用 户 完全 可 以 按照 分 类 目录 
找到 所 需要 的 信息 , 不 依靠 关键 词 (Keywords) 
进行 查询 。 目 录 索 引 中 最 具 代 表 性 网 站 有 
Yahoo、 新 浪 分 类 目录 搜索 。 

3， 元 搜索 引擎 

元 搜索 引擎 接受 用 户 查询 请 求 后 ， 同 时 
在 多 个 搜索 引擎 上 搜索 ， 并 将 结果 返回 给 用 
户 。 在 搜索 结果 排列 方面 ， 有 的 直接 按 来 源 
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排列 搜索 结果 ， 有 的 则 按 自 定 的 规则 将 结果 
重新 排列 组 合 。 

4. 垂直 搜索 引擎 

垂直 搜索 引擎 为 2006 年 后 逐步 兴起 的 一 
类 搜索 引擎 。 不 同 于 通用 的 网 页 搜索 引擎 ， 
垂直 搜索 专注 于 特定 的 搜索 领域 和 搜索 需求 ， 
在 其 特定 的 搜索 领域 有 更 好 的 用 户 体验 。 相 
比 通用 搜索 动 辑 数 千 台 检索 服务 器 ， 垂 直 搜 
索 需 要 的 硬件 成 本 低 、 用 户 需 求 特定 、 查 询 
的 方式 多 样 。 

5. 集合 式 搜索 引擎 

集合 式 搜索 引擎 :该 搜索 引擎 类 似 元 搜 
索引 擎 ， 区 别 在 于 它 并 非 同时 调用 多 个 搜索 
引擎 进行 搜索 ， 而 是 由 用 户 从 提供 的 若干 搜 
索引 擎 中 选择 。 

6. 门户 搜索 引擎 

门户 搜索 引擎 ，AOLSearch、MSNSearch 
等 虽然 提供 搜索 服务 ， 但 自身 既 没 有 分 类 目 
录 ， 也 没有 网 页 数据 库 ， 其 搜索 结果 来 自 其 
他 搜索 引擎 。 


32.1.4 ”搜索 引擎 注册 


一 般 到 搜索 引擎 注册 的 时 候 ， 除 了 关键 
字 是 对 公司 网 站 具体 的 描述 以 外 ， 还 要 告诉 
搜索 引擎 公司 的 网 址 ， 也 就 是 URL， 一 般 
在 注册 前 要 选择 最 能 表现 产品 或 者 服务 的 
URL。 
目前 提交 URL 的 方法 大 概 有 两 种 ， 手 动 
注册 和 软件 自动 注册 。 手 动 注册 需要 你 进入 
不 同 的 搜索 引擎 自己 进行 注册 。 这 种 注册 的 
缺点 是 工作 量 比较 大 ， 而 且 还 要 辨认 那些 难 
懂 的 英文 。 但 是 它 的 效果 特别 好 ， 一 般 建议 
采用 手动 注册 的 办 法 。 软 件 自动 搜索 是 利用 
专门 的 注册 软件 ， 它 们 可 以 自动 地 在 多 个 搜 
索引 擎 完成 注册 工作 。 软 件 自动 注册 虽然 快 
捷 ， 但 是 毕竟 不 是 人 工 ， 智 能 化 方面 差 了 点 。 

可 以 把 自己 的 网 站 提交 给 各 个 搜索 引擎 ， 
这 样 在 各 个 搜索 引擎 就 能 找到 你 的 网 站 了 ， 
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虽然 不 是 每 个 都 能 通过 ， 但 是 勤劳 一 点 总 是 
会 有 几 个 通过 的 。 

方法 很 简单 ， 首 先 在 浏览 器 打开 每 个 网 
站 的 登录 口 ， 然 后 把 网 址 输入 进去 就 行 了 。 

百度 搜索 网 站 登录 口 : http://www.baidu 
com/search/url_submit.html。 

Google 网 站 登录 口 : http:/www.google. 
cn/intl/zh-CN_cn/add url.html。 

英文 雅虎 登录 口 : http://search.yahoo.com/ 
info/subnuit.html。 


32.1.5 ”搜索 引 警 优化 原则 


SEO 意思 就 是 “搜索 引擎 优化 ”，SEO 
的 主要 工作 是 通过 了 解 各 类 搜索 引擎 在 抓 取 
页 面 时 的 不 同 特征 ， 针 对 各 类 搜索 引擎 制定 
不 同 的 优化 方针 ， 使 得 所 要 优化 网 站 的 排名 
上 升 ， 进 而 达到 提升 网 站 流量 乃至 最 终 达到 
提升 网 站 销售 能 力 和 宣传 网 站 的 目的 。 
网 站 架构 优化 
规划 合理 的 站 点 结构 ， 尽 可 能 减 小 目录 
深度 ， 一 般 目录 深度 最 好 不 超过 4 层 ， 目 录 
深度 较 小 的 页 面 不 管 对 于 搜索 引擎 还 是 普通 
用 户 都 是 有 好 处 的 ， 因 而 能 得 到 更 多 的 权重 。 
也 可 以 通过 一 些 技术 手段 解决 URL 长 度 的 问 
题 ， 如 URL 重 写 ， 或 者 短 网 址 转换 。 
建立 合理 的 导航 结构 ， 减 少 页 面 间 的 链 
接 深度 。 只 有 具有 清晰 合理 的 网 站 导航 结构 ， 
才能 尽 可 能 多 地 收录 网 站 的 页 面 和 收录 更 深 
层次 的 页 面 。 
2. 网 页 代码 优化 
熟悉 网 页 代码 HTML 的 编写 ， 并 且 掌 握 
W3C 标准 ， 是 网 站 优化 需要 掌握 的 基础 知识 。 
当然 如 果 有 网 页 编程 基础 会 更 好 。 
。 网 页 布局 采取 DIV+CSS 方式 。 与 传 
统 的 Table 布 局 相 比 ，DIV+CSS 布 
局 的 网 页 无 论 是 打开 速度 还 是 网 站 维 
护 、 更 改 ， 都 显得 特别 方便 。 
删除 不 规范 的 URL 字符 或 错误 的 
URL。URL 错误 是 网 站 的 硬 伤 ， 不 


规范 的 URL 不 仅 影响 蜘蛛 怜 取 ， 还 
会 影响 用 户 体验 。 如 果 这 方面 的 错误 
较 多 的 话 ， 无 论 是 搜索 引擎 ， 还 是 用 
户 都 会 放弃 这 个 网 站 的 。 
。 削减 或 删除 注解 。 代 码 中 的 注解 只 是 
为 了 程序 员 方 便 阅 读 、 查 错 和 修改 网 
站 代码 而 设计 的 ， 对 于 这 些 代码 ， 只 
会 增加 网 页 的 空间 ， 因 此 ， 建 议 删 去 
或 者 部 分 删 去 。 
。 减少 JavaScript、Flash 等 特效 ， 因 为 
搜索 引擎 不 好 识别 。 
3. 关键 字 优化 
搜索 引擎 是 以 关键 词 为 搜索 条 件 进行 检索 
的 ， 关键 字 优化 主要 目的 就 是 提高 页 面 和 关键 
字 的 相关 性 。 对 于 SEO 搜索 引擎 优化 来 讲 ， 
关键 字 的 挑选 可 以 从 以 下 3 个 方面 来 进行 。 
。 ”根据 自己 的 第 一 感觉 ， 首 先 列 出 自己 
认为 比较 合适 的 关键 字 。 
。 分 析 潜 在 的 客户 及 合作 伙伴 等 ， 多 向 
这 些 人 咨询 ， 参 考 他 们 的 意见 。 
。 使 用 各 类 优化 工具 进行 关键 字 的 分 
析 , 进而 选 出 适合 自己 网 站 的 关键 字 。 
4. 站 内 链接 优化 
内 部 链接 在 网 站 的 优化 过 程 中 占据 着 非 
常 重要 的 位 置 。 内 部 链接 的 建设 可 以 从 以 下 
几 个 方面 来 入 手 : 
。 ”建立 网 站 地 图 。 为 你 的 网 站 建立 一 个 
网 站 地 图 ， 同 时 需要 做 的 是 把 网 站 地 
图 放 到 网 站 首页 ， 使 搜索 引擎 非常 方 
便 地 就 能 抓 取 所 有 网 页 。 
。 每 个 页 面 离 首页 最 多 4 次 单 击 。 在 设 
计 网 站 的 时 候 ， 就 要 确保 从 首页 出 发 
到 网 站 任何 一 个 地 方 都 不 要 大 于 4 次 
单 击 ， 如 果 是 小 型 网 站 ， 还 可 以 放 在 
根 目 录 ， 离 首页 越 近 越 好 。 


导航 网 站 登录 


。 ” 尽 可 能 使 用 文字 导航 。 网 站 的 导航 最 
好 是 文字 的 , 有 利于 被 搜索 引擎 抓 取 。 
用 图 片 或 者 脚本 语言 来 制作 的 导航 ， 
虽然 看 起 来 漂亮 ， 但 是 这 样 做 不 利于 
被 搜索 引擎 抓 取 。 
。 ”网 站 导航 中 的 链接 文字 应 该 准确 地 描 
述 栏目 内 容 ， 这 样 自然 而 然 在 链接 文 
字 中 有 关键 词 ， 但 注意 不 要 堆积 关键 
词 。 在 网 页 正文 中 提 到 其 他 网 页 内 容 
的 时 候 ， 可 以 自然 链接 到 其 他 网 页 。 
。 ”网 站 内 部 的 互相 链接 。 在 网 页 正文 中 
引用 其 他 文章 时 应 该 用 关键 词 链接 向 
其 他 相关 网 页 ， 这 样 做 既 有 利于 搜索 
引擎 排名 ， 也 有 利于 收录 。 
5. 分 析 与 观察 能 力 
SEO 不 是 你 照 着 一 次 做 完 就 没事 了 ， 不 
断 地 分 析 与 观察 是 绝对 必要 的 。 例 如 ， 持 续 
追踪 锁定 的 关键 字 、 分 析 关 键 字 排名 问题 、 
解决 排名 困境 、 了 解 搜索 引擎 每 次 更 新 的 重 
点 与 特性 ， 这 些 都 是 SEO 的 日 常 工作 。 
6. 了 解 搜索 习惯 
就 拿 关键 词 的 选择 来 说 ， 关 键 字 的 锁定 
与 选择 是 SEO 工作 的 起 头 ， 也 是 决定 效益 最 
重要 的 一 步 。 关 键 字 的 锁定 涉及 面相 当 广 泛 ， 
从 关键 字 的 难度 、 关 键 字 属 性 到 搜索 心理 研 
究 都 有 。 所 以 了 解 搜 索 人 群 的 搜索 习惯 和 
搜索 心理 是 相当 重要 的 ， 当 然 它 也 是 十 分 
复杂 的 。 
7. 不 断 的 创新 能 力 
搜索 引擎 在 不 断 地 调整 策略 来 应 对 成 几 
何 倍数 增长 的 网 页 内 容 ，SEO 的 方法 也 在 不 
断 地 调整 ， 努 力 尝 试 和 创新 各 种 方法 ， 让 搜 
索引 擎 永远 都 青睐 你 的 网 站 ， 需 要 有 相当 强 
的 创新 意识 。 当 然 作 浆 的 方法 除外 。 


T 


现在 国内 有 大 量 的 网 址 导航 类 站 点 ， 如 http://www.hao123.com/、http://www.265.com/ 等 。 
在 这 些 网 址 导航 类 做 上 链接 ， 也 能 带 来 大 量 的 流量 ， 不 过 现在 想 登 录 上 像 hao123 这 种 流量 特 
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别 大 的 站 点 并 不 是 一 件 容易 的 事 。 如 图 32-3 所 示 的 导航 网 站 。 
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图 32-3 导航 网 站 


其】 友情 链接 


如 果 网 站 提供 的 是 某 种 服务 ， 而 其 他 网 站 的 内 容 刚 好 和 你 形成 互补 ， 这 时 不 妨 考虑 与 其 建 
立 链接 或 交换 广告 ， 一 来 增加 了 双方 的 访问 量 ， 二 来 可 以 给 客户 提供 更 加 周全 的 服务 ， 同 时 也 


避免 了 直接 的 竞争 。 网 站 之 间 互 相交 换 链接 和 旗帜 广告 有 助 于 增加 双方 的 访问 量 ， 如 图 32-4 
所 示 为 交换 友情 链接 。 


| 


TD 站 Ns WSI W136 
538% 起 分 期 。 委 淘 宝 《人 折 网 。 娶 划 算 泡 4 克 


35Q4% 和 过 > 走秀 。 ”天 天 网 。 疼 光 sw。 易 胞 sr 。 等 虹 党 


Taiifomeor rete Com 


XRRE: A ms msi SE ga Enn zs whA RN EH EW sta 


品牌 特卖 全 LT 人 人 村人 


sh 
CuNGUE 28 Kor 38 LAscE 2 mle 1-25 = 3 
ep es EE EE se 
i Sms 盘 35s ONY 3x 室 35z Lee 3 


图 32-4 交换 友情 链接 
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最 理想 的 链接 对 象 是 那些 与 你 的 网 站 流量 相当 的 网 站 。 流 量 太 大 的 网 站 管理 员 由 于 要 应 付 
太 多 要 求 互 换 链接 的 请 求 ， 容 易 将 你 忽略 。 小 一 些 的 网 站 也 可 考虑 。 互 换 链 接 页 面 要 放 在 在 网 
站 比较 偏僻 的 地 方 ， 以 免 将 你 的 网 站 访问 者 很 快 引 向 他 人 的 站 点 。 

找到 可 以 互 换 链接 的 网 站 之 后 ， 发 一 封 个 性 化 的 E-mail 给 对 方 网 站 管理 员 ， 如 果 对 方 没 
有 回复 ， 再 打 电 话 试 试 。 

在 进行 交换 链接 过 程 中 ， 往 往 存在 一 些 错误 的 做 法 ， 如 不 管 对 方 网 站 的 质量 和 相关 性 ， 片 
面 追 求 链接 数量 ， 这 样 只 能 适得其反 。 有 些 网 站 甚至 通过 大 量 发 送 垃圾 邮件 的 方式 请 求 友情 链 
接 ， 这 是 非常 错误 的 做 法 。 


网 络 广告 


网 络 广告 就 是 在 网 络 上 做 的 广告 ， 即 利用 网 站 上 的 广告 横幅 、 文 本 链接 、 多 媒体 ， 在 互联 
网 刊登 或 发 布 ， 通 过 网 络 传递 到 互联 网 用 户 的 一 种 高 科技 广告 运作 方式 。 一 般 形式 是 各 种 图 形 
广告 ， 称 为 旗帜 广告 。 网 络 广 告 本 质 上 仍 属 于 传统 宣传 模式 ， 只 不 过 载体 不 同 而 已 。 如 图 32-5 
所 示 为 投放 网 络 广告 推广 网 站 。 
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图 32-5 使 用 网 络 广告 推广 网 站 
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发 布 信息 推广 


信息 发 布 既 是 网 络 营销 的 基本 职能 ， 又 是 一 种 实用 的 操作 手段 ， 通 过 互联 网 ， 不 仅 可 以 浏 
览 到 大 量 商业 信息 ， 同 时 还 可 以 自己 发 布 信息 。 在 网 上 发 布 信息 可 以 说 是 网 络 营销 最 简单 的 方 
式 ， 网 上 有 许多 网 站 提供 企业 供求 信息 发 布 ， 并 且 多 数 为 免费 发 布 信息 ， 有 时 这 种 简单 的 方式 
也 会 取得 意 想 不 到 的 效果 。 
分 类 信息 网 站 是 现在 网 站 推广 的 一 个 重要 方式 ， 因 为 它 流量 高 ， 且 审核 宽松 。 下 面 介绍 在 
分 类 信息 网 站 做 推广 的 一 些 事项 。 
。 首先 要 做 的 就 是 在 网 上 找 一 些 分 类 信息 的 网 站 ， 这 类 网 站 很 多 ， 只 找 十 几 、 二 十 个 权 
重 比较 高 的 就 行 了 , 例如 赶集 、58 同城 百姓 网 等 。 如 图 32-6 所 示 是 在 赶集 网 发 布 信息 。 
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图 32-6 在 赶集 网 发 布 信息 


。 ” 选 对 城市 。 现 在 不 是 纯 互 联网 的 企业 都 有 一 定 的 地 域 性 ， 如 果 你 的 企业 或 者 产品 地 域 
性 很 强 ， 强 烈 建议 你 以 地 域 性 推广 为 主 。 大 部 分 分 类 信息 网 都 有 地 区 分 站 。 

。 ” 选 对 发 布 板块 。 因 为 分 类 信息 的 类 别 非常 多 ， 在 选择 类 别 的 时 候 一 定 遵循 我 们 自己 的 
产品 和 服务 属性 ， 不 要 发 布 错 了 。 例 如 ， 你 本 来 是 做 网 站 建设 的 ， 发 到 了 物流 运输 的 
类 别 ， 那 么 管理 员 会 把 你 的 信息 删除 的 。 

。 编辑 发 布 内 容 。 内 容 的 编辑 是 重 中 之 重 ， 为 什么 这 样 说 呢 ? 因为 它 像 软 文 一 样 ， 写 原 
创 的 最 好 。 不 要 从 其 他 人 那里 复制 一 个 相关 信息 过 来 ， 换 个 名 称 就 放 上 去 了 。 与 其 这 
样 做 无 用 功 ， 还 不 如 静 下 心 来 好 好 写 一 篇 内 容 ， 不 在 乎 文笔 多 好 ， 自 己 写 的 一 篇 内 容 
比 你 复制 十 几 篇 内 容 的 作用 都 大 。 

。 信息 的 排版 。 经 验 告诉 我 们 ， 同 样 的 信息 ， 排 版 混乱 被 删 的 概率 大 很 多 。 

。 ”跟踪 效果 。 发 布 的 每 一 条 信息 并 不 是 放 上 去 就 算 完事 了 ， 要 把 每 一 条 发 送 的 URL 地 
址 记录 下 来 ， 每 星期 查看 带 来 的 效果 如 何 ， 比 如 浏览 量 、 留 言 等 。 只 有 做 好 统计 ， 才 
能 根据 反馈 的 情况 采取 相应 的 措施 进行 改进 ， 提 高 推广 效果 。 
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xR 电子 邮件 


电子 邮件 因为 方便 、 快 捷 、 成 本 低廉 的 特点 ， 成 为 目前 使 用 最 广泛 的 互联 网 应 用 ， 是 一 种 
有 效 的 推广 工具 。 它 常用 的 方法 包括 邮件 列表 、 电 子 刊物 、 新 闻 邮 件 、 会 员 通 信 、 专 业 服 务 商 
的 电子 邮件 广告 等 。 


32.6.1 电子 邮件 推广 


电子 邮件 是 目前 使 用 最 广泛 的 互联 网 应 用 。 它 方便 快捷 ， 成 本 低廉 ， 不 失 为 一 种 有 效 的 联 
络 工具 。 如 图 32-7 所 示 为 使 用 电子 邮件 推广 网 站 。 


[oe nam lems) sm wellamn. sen. ECG 


a 上 
红酒 喜 字 膨大 放 能 
99 元 现 


送 ) ftal5 元 海 S 酒 ] 《 免 


2005 年 福 拉 斯 欧 茹 AOC 干 红 葡萄酒 
体验 价 : 39 元 市 场 从 206 


图 32-7 使 用 电子 邮件 推广 网 站 


相 比 其 他 网 络 营销 手法 ， 电 子 邮件 营销 速度 非常 快 。 搜 索引 擎 优化 需要 几 个 月 ， 甚 至 几 年 
的 努力 ， 才 能 充分 发 挥 效 果 。 博 客 营销 更 是 需要 时 间 ， 以 及 大 量 的 文章 。 而 电子 邮件 营销 只 要 
有 邮件 数据 库 在 手 ， 发 送 邮件 后 几 小 时 之 内 就 会 看 到 效果 ， 产 生 订 单 。 因 特 网 使 商家 可 以 立即 
与 成 二 上 万 潜在 的 和 现 有 的 顾客 取得 联系 。 

由 于 发 送 E-mail 的 成 本 极 低 且 具 有 即时 性 ， 因 此 ， 相 对 于 电话 或 邮寄 ， 顾 客 更 愿意 响应 
营销 活动 。 相 关 调查 报告 显示 ，E-mail 的 点 击 率 比 网 络 横幅 广告 和 旗帜 广告 的 点 击 率 平均 高 约 
5% 一 15%，E-mail 的 转换 率 比 网 络 横幅 广告 和 旗帜 广告 的 转换 率 平均 高 约 10% 一 30%。 


32.6.2 ”电子 邮件 推广 的 技巧 


电子 邮件 在 现在 的 推广 和 营销 特别 是 电子 商务 类 网 站 的 推广 和 营销 作用 越 来 越 明显 。 利 用 
好 技巧 ， 让 更 多 的 用 户 产 生 购买 行为 。 

。 ”提高 电子 邮件 的 到 达 率 ， 没 有 到 达 ， 打 开 也 无 从 谈 起 。 提 升 到 达 率 ， 不 断 地 研究 各 种 
发 送 邮件 的 方式 ， 来 提高 邮件 发 送 的 成 功率 。 

。 内容 清晰 简单 。 电 子 邮件 内 容 简洁 ， 用 最 简单 的 内 容 表达 出 你 的 诉求 点 。 如 果 有 必要 ， 
可 以 给 出 一 个 关于 详细 内 容 的 链接 ， 收 件 人 如 果 有 兴趣 ， 会 主动 单 击 你 的 链接 ， 和 否则 ， 
内 容 再 多 也 没有 价值 ， 只 能 引起 收 件 人 的 反感 。 

。 根据 不 同 的 用 户 合理 地 安排 邮件 的 主题 。 邮 件 的 主题 是 收 件 人 最 早 可 以 看 到 的 信息 ， 
邮件 内 容 是 否 能 引 人 和 人 注意， 主题 起 到 相当 重要 的 作用 。 邮 件 主题 应 言 简 意 赎 ， 以 便 收 
件 人 决定 是 否 继续 阅读 邮件 内 容 。 
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网 页 设计 与 网 站 建设 完全 实战 手册 


邮件 的 设计 一 定 要 美观 ， 给 人 眼前 一 亮 的 感觉 。 对 于 两 封 同样 陌生 的 邮件 ， 制 作 漂亮 
精美 的 邮件 肯定 比 制作 粗糙 的 邮件 让 用 户 更 容易 接受 。 因 此 ， 无 论 每 天 发 多 少 封 邮 件 ， 
尽量 在 发 之 前 花 点 时 间 美 化 一 下 ， 这 样 ， 不 但 可 以 提高 公司 的 形象 ， 也 拉 近 了 你 和 用 
户 之 间 的 距离 。 

电子 邮件 发 件 人 与 邮件 地 址 非常 重要 。 电 子 邮件 收 件 人 收 到 邮件 后 ， 如 果 是 有 印象 的 
发 件 人 名 称 与 发 件 人 地 址 ， 平 均 打开 率 要 比 没 有 印象 的 高 出 两 倍 以 上 。 因 此 ， 开 展 电 
子 邮件 营销 必须 做 到 : 保持 持续 稳定 的 发 件 人 名 称 ; 使 用 独 有 的 域名 与 发 件 人 地 址 ， 
这 样 让 他 们 更 容易 接受 我 们 。 

标题 中 包含 吸引 收 件 人 的 关键 词 ， 要 做 到 这 一 点 ， 就 需要 深入 挖掘 分 析 收 件 人 的 关注 
点 与 兴趣 点 ， 结 合 自己 特征 来 把 握 。 

持续 的 反馈 与 改进 。 持 续 地 分 析 那 些 到 达 了 而 没有 打开 的 原因 ， 通 过 一 些 调查 问卷 或 
者 访问 调查 ， 对 提高 打开 率 很 有 好 处 。 

转发 与 注册 一 一 获得 更 多 的 优惠 。 在 我 们 发 布 给 一 个 用 户 的 时 候 ， 提 醒 他 转发 或 者 注 
册 ， 并 用 一 定 的 激励 方式 来 鼓励 和 促进 他 实施 这 项 活动 。 

邮件 发 送 的 频率 要 适度 : 有 些 公 司 有 了 邮件 群发 平台 以 后 ， 每 天 就 狂 发 邮件 给 用 户 ， 
这 样 ， 不 但 造成 用 户 反 感 ， 而 且 邮 件 服务 器 也 会 把 你 列 入 垃圾 邮件 的 名 单 中 。 因 此 ， 
我 们 在 发 送 邮件 的 时 候 ， 一 定 要 用 策略 ， 要 懂得 分 析 数 据 。 


问答 式 免费 推广 


在 百度 知道 、 雅 虎 知识 堂 、 搜 搜 问 问 中 回答 与 自己 网 站 内 容 相关 的 问题 ， 然 后 在 问题 中 加 


入 自己 的 网 站 链接 或 公司 地 址 来 推广 。 如 图 32-8 所 示 。 
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图 32-8 百度 知道 问答 式 免费 推广 


第 32 章 ”网 站 的 宣传 推广 


一 般 来 说 ， 如 果 只 是 单纯 地 在 回答 中 写 上 一 个 网 址 ， 这 样 很 难 被 采纳 。 你 可 以 将 自己 的 网 
站 地 址 巧妙 地 融入 回答 中 ， 让 用 户 有 兴趣 打开 网 站 ， 或 者 回答 一 部 分 ， 后 面 提供 自己 的 网 址 。 

你 也 可 以 注册 多 个 用 户 名 ， 自 问 自 答 ， 然 后 将 自己 的 回答 选 为 最 佳 答案 。 比 如 “什么 网 站 
在 线 看 电影 速度 最 快 ?” 最 佳 答案 是 一 个 电影 网 站 ， 这 通常 都 是 站 长 在 采用 自问 自 答 的 方式 为 
自己 的 网 站 做 免费 推广 。 

如 果 回 答 的 问题 确实 有 价值 ， 能 解决 网 友 的 问题 ， 那 么 这 种 免费 推广 的 方法 持久 性 就 非常 
好 ， 可 以 源源 不 断 地 为 网 站 带 来 流量 。 但 是 如 果 大 量 地 加 广告 ， 轻 则 可 能 造成 问题 被 删除 ， 重 
则 会 遭 到 搜索 引擎 的 惩罚 。 所 以 使 用 这 种 方法 做 网 站 推广 最 重要 的 是 把 握 好 度 。 


在 博客 中 推广 


利用 博客 可 以 宣传 推广 你 的 网 站 、 产 品 、 服 务 ， 宣 传 得 当 ， 可 以 有 效 地 提升 企业 的 知名 度 ， 
无 形 之 中 提升 企业 的 收益 。 但 是 做 得 不 到 位 ， 就 会 对 企业 的 产品 和 服务 产生 抵触 情绪 ， 认 为 你 
的 产品 和 服务 也 很 差 ， 从 而 对 企业 产生 不 好 的 影响 。 如 图 32-9 所 示 为 博客 推广 网 站 。 


mr 有 | 本 | | 


搞鬼 术 床 对 化 上 而 过 些 听 是 表 尿 主体 到 笠 史 怕 布 ， 当 外 二 后 还 要 有 口 
和 上 而 的 工作 条 估 不 多 的 如 采 有 一 各 这 笠 的 条 能 斤 床 ， 只 各 下 洒 才 
全 - 


图 32-9 博客 推广 网 站 
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做 博客 营销 ， 一 定 要 强调 要 把 产品 宣传 做 到 “无 形 ”， 对 博客 内 容 做 到 精准 ， 具 有 引导 性 ， 
做 到 宁 缺 缴 滥 ， 才 能 有 效 地 引导 潜在 客户 购买 你 的 产品 和 服务 。 方 法 如 下 : 


发 布 一 些 有 趣 、 时 效 性 强 的 博文 ， 吸 引 浏览 者 。 

在 博客 中 有 自 定义 模板 ， 自 定义 一 个 友情 链接 ， 将 要 推广 的 网 址 加 入 其 中 。 

维护 好 博客 ， 加 一 些 圈子 和 社区 ， 让 更 多 的 人 知道 你 的 博客 ， 从 而 了 解 到 你 要 推广 的 
目标 。 

一 个 长 时 间 不 更 新 的 博客 ， 没 有 人 会 喜欢 ， 所 以 要 随时 发 表 新 内 容 ， 哪 怕 只 是 变化 一 
个 图 片 。 简 单 地 说 就 是 及 时 更 新 。 搜 索引 擎 喜欢 新 的 内 容 ， 网 站 越 常 更 新 ， 搜 索引 擎 
便 越 常 造 访 ， 如 此 可 以 让 你 的 博客 经 常 被 列 入 搜索 的 结果 中 。 一 旦 让 搜索 引擎 信赖 不 
断 更 新 的 内 容 ， 便 能 提高 博客 在 搜索 结果 中 的 排名 。 

网 络 上 ， 获 取信 息 变 得 十 分 容易 ， 所 以 如 果 你 的 博客 能 经 常 提 供 有 价值 的 信息 ， 将 更 
能 吸引 访客 。 

如 果 可 以 ， 用 其 他 的 账户 回复 ， 以 提高 博文 的 互动 ， 或 发 布 一 些 互动 性 比较 强 的 博文 ， 
调动 访问 者 的 积极 性 。 

在 一 些 热门 的 博客 中 ， 用 留言 的 方式 宣传 自己 的 网 站 。 比 如 许多 名 人 博客 的 访问 量 超 
过 千 万 次 ， 如 果 每 次 自己 的 留言 都 能 够 抢 到 “沙发 ”， 带 来 的 流量 也 相当 大 。 


建立 多 个 博客 的 方法 如 果 运 用 得 当 ， 文 章 优秀 而 被 推荐 到 博客 首页 ， 每 天 为 网 站 带 来 的 流 
量 是 相当 可 观 的 ， 但 这 很 难 做 到 ， 需 要 花费 大 量 的 精力 ; 而 采用 在 他 人 博客 中 留言 的 方式 ， 虽 
然 也 有 效果 ， 但 很 容易 被 作为 无 用 评论 或 广告 而 删除 。 


微 博 营销 推广 


微 博 营销 是 指 通过 微 博 平台 为 商家 、 个 人 等 创造 价值 而 执行 的 一 种 营销 方式 ， 也 是 指 商家 
或 个 人 通过 微 博 平台 发 现 并 满足 用 户 各 类 需求 的 商业 行为 方式 。 

微 博 营销 以 微 博 作为 营销 平台 ， 每 一 个 听众 〈 粉 丝 ) 都 是 潜在 的 营销 对 象 ， 企 业 利用 更 新 
自己 的 微 博 向 网 友 传播 企业 信息 、 产 品 信息 ， 树 立 良 好 的 企业 形象 和 产品 形象 。 每 天 更 新 内 容 
就 可 以 跟 大 家 交流 互动 ， 或 者 发 布 大 家 感 兴趣 的 话题 ， 这 样 来 达到 营销 的 目的 。 如 图 32-10 所 
示 为 利用 腾讯 微 博 宣传 网 站 。 
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图 32-10 利用 腾讯 微 博 宣传 
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微 博 营销 注重 价值 的 传递 、 内 容 的 互动 、 系 统 的 布局 、 准 确 的 定位 ， 微 博 的 火热 发 展 也 使 
得 其 营销 效果 尤为 显著 。 微 博 营 销 涉及 的 范围 包括 认证 、 有 效 粉丝 、 话 题 、 名 博 、 开 放 平 台 、 
整体 运营 等 。 当 然 ， 微 博 营销 也 有 其 缺点 ， 有 效 粉 丝 数 不 足 、 微 博 内 容 更 新 过 快 等 。 


微 信 营 销 推广 


微 信 推广 营销 是 随 着 微 信 的 火热 而 兴起 的 一 种 网 络 营 销 方式 。 微 信 不 存在 距离 的 限制 ， 用 
户 注册 微 信 后 ， 可 与 “朋友 ”形成 一 种 联系 ， 用 户 订阅 自己 所 需 的 信息 ， 商 家 通过 提供 用 户 需 
要 的 信息 ， 推 广 自己 的 产品 ， 从 而 实现 点 对 点 的 营销 。 如 图 32-11 所 示 为 利用 微 信 二 维 码 营销 
推广 企业 。 


图 32-11 PaPmmpea 


QQ 营销 推广 

在 网 络 中 拥有 自己 的 博客 ,平时 在 其 中 写 一 下 自己 的 心情 是 目前 大 多 数 网 民 都 会 做 的 事情 ， 
但 是 利用 博客 也 可 以 推广 自己 的 网 站 ， 这 方面 也 不 能 忽略 。 
32.11.1 设置 QQ 签名 推广 


QQ 个 人 设置 中 有 一 栏 个 性 签名 ， 这 里 可 以 根据 自己 的 爱好 、 心 情 来 设置 自己 与 众 不 同 的 
个 性 签名 。 当 然 也 可 以 利用 QQ 签名 添加 自己 的 广告 ， 例 如 添加 自己 的 网 站 名 称 。 如 图 32-12 
所 示 为 设置 的 个 性 签名 。 
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图 32-12 QQ 签名 推广 


32.11.2 QQ 群 推广 技巧 


利用 即时 软件 的 群 组 功能 ， 如 QQ 群 、 
MSN 群 等 ， 加 入 群 后 发 布 自己 的 网 站 信息 ， 
这 种 方式 能 够 即时 为 自己 的 网 站 带 来 流量 。 
如 果 同 时 加 几 十 个 QQ 群 ， 推 广 网 站 可 以 达 
到 非常 不 错 的 效果 。 但 这 种 方式 同时 也 被 很 
多 人 厌恶 。 如 图 32-13 所 示 为 利用 QQ 群 推广 
网 站 。 

如 果 加 入 群 后 发 布 的 是 直接 广告 ， 管 理 
较 好 的 群 组 马上 将 发 广告 的 人 “ 踢 出 ”， 但 
现在 很 多 站 长 都 开始 使 用 其 他 的 方式 ， 如 先 
与 群 管理 员 搞 好 关系 ， 平 时 积极 参与 聊天 等 
活动 ， 在 适当 的 时 候 发 布 自己 网 站 的 广告 ， 
可 以 起 到 更 好 的 效果 。 


本 RR EE 
站 HR 

和 有 了 位 Fe a Tan 
EN TT 
各 额 有 限 ! 
hh 误 . 浊 、 热 - 和 
了 麻 、 种 、 腾 、 病 有 立 村 见 形 的 效果 


图 32-13 利用 QQ 群 推广 网 站 
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另外 ， 还 有 一 种 现在 很 多 站 点 都 在 使 用 
的 方法 ， 就 是 建立 自己 网 站 的 QQ 群 ， 然 后 
在 网 站 上 宣传 吸引 网 友 的 加 入 ， 这 样 一 来 不 
仅 能 够 近 距 离 跟 自己 的 网 站 用 户 进行 交流 ， 
还 能 增加 用 户 的 恭 性 ， 而 且 网 站 有 什么 新 功 
能 推出 ， 可 以 即时 在 群 中 发 布 通知 信息 ， 并 
且 不 会 有 因为 发 广告 而 被 < 踢 出 ”的 后 顾 之 忧 。 

目前 每 个 QQ 基本 都 加 入 或 则 拥有 过 QQ 
群 ， 如 此 强大 的 资源 ， 一 定 要 好 好 利用 ， 那 
么 怎么 利用 QQ 群 进行 营销 呢 ? 

1. 如 何 推广 群 ， 提 升 群 人 气 

选择 相关 性 、 人 气 高 的 群 做 推广 ， 入 群 
后 别 急 着 推广 自己 ， 降 低 被 踢 的 几率 。 等 熟 
悉 了 群 内 成 员 后 ， 了 解 群 规 后 ， 可 见 机 插话 ， 
为 群 解决 问题 ， 提 升 知名 度 ， 获 取 好 感 。 但 
是 也 不 能 急 ， 当 广告 发 到 让 别人 感觉 不 像 是 
广告 而 是 诱惑 的 时 候 ， 就 是 最 高 境界 。 

2. 利用 QQ 群 进行 营销 

加 入 群 的 都 是 相关 的 需求 者 。 例 如 : 学 
习 群 可 以 做 讨论 、 培 训 形式 ， 产 品 群 可 以 定 
期 提供 活动 推广 产品 ， 服 务 群 则 可 以 提供 服 
务 资 讯 ,交友 群 则 需要 创造 良好 的 交友 氛围 。 
采用 的 方法 需要 根据 群 的 特点 来 进行 。 

3. 如 何 带 动 群 互动 性 

最 好 的 方法 就 是 定期 组 织 相关 话题 讨论 ， 
话题 起 初 开展 都 会 有 不 顺利 的 时 候 ， 但 是 长 
期 坚持 下 去 ， 形 成 习惯 ， 情 况 就 不 一 
要 懂 如 何 利用 QQ 群 带动 人 气 进行 营销 
要 懂得 什么 时 候 转 移 话题 、 ea 
题 、 什 么 时 候 带动 话题 ， 必 须 面 面 俱 到 。 

4. 如 何 维护 群众 及 群 质量 

群 中 难免 有 竞争 者 ， 不 相关 的 广告 发 布 
者 ， 该 删除 的 绝 不 手软 ， 这 是 维护 群 质量 的 
一 个 不 得 已 的 做 法 。 尽 可 能 打造 一 个 文明 有 
质量 的 群 ， 对 于 情况 恶劣 者 应 该 予以 管理 。 
要 掌握 如 何 化 解 群 员 矛盾 ， 最 好 的 方法 是 私 
下 化 解 。 打 造 一 个 有 良好 口碑 的 QQ 群 ， 达 
成 推广 才 是 最 重要 的 。 


32.11.3 QQ 推广 小 技巧 

QQ 是 目前 国内 使 用 最 多 的 聊天 工具 ， 使 用 得 好 可 以 提高 曝光 率 ， 获 得 营销 效果 。 

1. QQ 网 名 吸引 潜在 用 户 的 关注 

以 营销 为 目的 的 网 名 是 需要 优化 的 ， 要 让 名 字 起 到 广告 的 效果 ， 也 让 网 名 能 够 在 好 友 中 获 
得 靠 前 的 排名 。 在 QQ 名 称 前 加 特殊 符号 、 以 英文 命名 、 以 靠 前 的 英文 字母 开头 都 可 以 让 自己 
的 QQ 在 群 里 、 在 好 友 里 排名 靠 前 。 

2. QQ 状态 影响 你 在 群 里 的 排名 

QQ 分 为 很 多 种 状态 ， 在 线 、 隐 身 、 我 想 聊天 、 人 忙碌 等 。 其 中 将 状态 设置 为 我 想 聊 天 ， 即 
可 获得 第 一 排名 ， 即 使 在 群 里 ， 也 会 排 在 群 主 前 面 。 

3. 利用 群 空间 提高 曝光 率 

多 去 群 空间 发 布 论 坛 文章 、 发 布 群 相册 、 发 布 群 话题 等 ， 可 以 在 群 的 动态 内 显示 出 你 的 更 
新 信息 ， 从 而 获得 别人 的 眼球 。 

4. 群发 消息 也 要 讲究 技巧 

群发 消息 要 注意 的 技巧 就 是 给 不 同 组 别 的 人 编辑 发 布 不 同 的 消息 ， 以 适应 好 友 的 需求 。 还 有 
一 种 方式 ， 就 是 去 加 陌生 人 ， 当 然 多 数 会 被 拒绝 了 。 但 是 加 其 为 好 友 的 时 候 ， 都 会 填写 “好 友 请 求 ” 
的 内 容 ， 一 般 有 固定 的 字数 限制 ， 就 看 你 怎么 在 有 限 的 字数 内 ， 发 挥 你 的 文字 游戏 智商 了 。 

5. 利用 QQ 空间 、 校 友 空 间 做 好 博客 营销 

这 就 像 是 你 的 个 人 博客 ， 通 过 空间 名 称 、 签 名 、 日 志 、 相 册 、 说 说 心情 、 空 间 资 料 等 都 可 
以 适当 地 做 好 自己 的 推广 活动 。 

6. QQ 游戏 也 能 提高 你 的 知名 度 

将 QQ 游戏 的 基本 资料 设置 好 ， 然 后 经 常 进 入 ， 这 样 就 会 提高 自己 的 曝光 率 了 ， 别 以 为 你 
在 玩 游戏 ， 你 只 是 为 了 让 别人 更 多 地 看 到 你 的 出 现 而 已 。 

7 串门、 访客 留言 ， 以 吸引 别人 的 眼球 

将 自己 的 个 人 资料 、 个 人 签名 设置 好 ， 然 后 去 其 他 人 的 空间 内 转悠 ， 留 下 足迹 就 好 了 ， 会 
吸引 潜在 的 客户 群 。 

8. QQ 好 友 问 问 ， 树 立行 业 专家 典范 

这 个 就 像 是 百度 知道 一 样 。 不 过 只 要 你 回答 了 ， 都 会 第 一 时 间 通 知 你 的 好 友 ， 这 个 比 百 度 
知道 的 推广 更 为 主动 、 快 捷 。 

9. QQ 印象 、 宠 物 串 门 、 赠 送 空间 礼物 、 进 行 QQ 秀 合影 、 好 友 买 卖 等 互动 交往 

以 上 提 到 的 都 是 利用 QQ 的 推广 方式 ， 能 够 让 你 的 好 友 关注 你 ， 提 高 你 的 友好 度 和 曝光 率 ， 
为 你 的 空间 带 来 流量 。 不 管 是 宠物 、 礼 物 、 游 戏 等 一 切 可 以 随心 设置 名 称 、 签 名 的 地 方 ， 都 可 
以 植 入 自己 的 广告 ， 这 样 就 能 提高 自己 的 曝光 率 ， 也 起 到 一 定 的 宣传 效果 。 


传统 网 下 推广 


在 网 站 的 宣传 推广 中 ， 不 要 太 狭 隘 ， 不 要 只 着 眼 于 各 种 网 络 推广 方式 ， 对 于 传统 的 网 下 推 
广 宣传 方式 也 要 很 好 地 加 以 利用 。 
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1. 印 名 片 推广 

有 很 多 新 手 也 许 会 认为 ， 网 上 交易 都 是 
在 网 上 完成 的 ， 做 名 片 岂 不 是 浪费 成 本 ? 殊 
不 知 ， 虽 然 是 在 网 上 建站 的 ， 但 大 家 仍 可 以 
通过 传统 方式 进行 联系 。 因 此 ， 在 销售 商品 
的 时 候 ， 就 可 以 把 自己 设计 精美 、 个 性 十 足 
的 名 片 夹 在 商品 中 ， 说 不 定 就 能 起 到 很 大 的 
宣传 作用 。 

而 且 在 印刷 了 名 片 之 后 ， 店 主 们 还 可 以 
在 日 常生 活 中 ， 在 与 人 交往 时 递送 出 去 ， 随 
时 随地 来 宣传 自己 的 网 站 。 甚 至 可 以 在 同学 
通讯 录 里 面 发 出 宣传 和 邀请 ， 在 同学 聚会 时 
发 出 自己 的 宣传 名 片 。 既 可 以 让 同学 朋友 分 
享 自己 的 建站 乐趣 ， 又 可 以 为 网 站 增添 人 气 ， 
说 不 定 还 可 以 做 成 几 单 生意 ， 何 乐 而 不 为 呢 ? 
如 图 32-14 所 示 为 名 片 推广 。 


hmpvy/shop35791189.laobaocom/ 
hmp,//shop60696058 .ioobaa coml 
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图 32-14 名 片 推广 


2. 媒体 宣传 

当然 此 方式 需要 很 大 的 投资 。 但 其 效果 
也 是 可 想 而 知 的 。 有 官方 背景 的 推广 能 使 你 
网 站 更 高 的 可 信和 度 。 和 当地 电视 、 电 台 、 报 
社 等 媒体 合作 ， 如 果 你 有 这 个 能 力 的 话 ， 并 
且 要 有 足够 的 资金 作为 基础 。 

传统 媒体 广告 方式 不 应 废止 。 但 无 论 是 
报纸 还 是 杂志 广告 ， 一 定 确保 在 其 中 展示 你 
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的 网 址 。 要 将 查看 网 站 作为 广告 的 辅助 内 容 ， 
提醒 用 户 浏览 网 站 将 获取 更 多 相关 信息 。 别 
忽视 在 一 些 定 位 相对 较 窗 的 杂志 或 贸易 期 刊 
登 广 告 ， 有 时 这 些 广告 定位 会 更 加 准确 、 有 
效 ， 而 且 比 网 络 广告 更 便宜 。 还 有 其 他 传统 
方式 可 增加 网 站 访问 量 ， 如 直 邮 、 分 类 广告 、 
明信片 等 。 电 视 广告 恶 怕 更 适合 于 那些 销售 
大 众 化 商品 的 网 站 。 

3. 搞怪 宣传 

例如 买 几 件 T 恤 ， 在 上 面 印 上 你 的 网 站 
LOGO， 送 给 身边 的 朋友 和 亲人 ， 要 搞 得 漂亮 
点 ， 他 们 就 爱 穿 出 去 为 你 做 宣传 ， 自 己 也 可 
以 穿 。 

4， 印 制 传统 广告 

印 制 并 发 放 广告 也 是 网 站 可 以 采用 的 一 
种 推广 方式 。 这 也 是 一 种 很 典型 的 传统 广告 
方式 ， 可 以 大 量 印刷 自己 网 站 的 宣传 单 ， 然 
后 亲自 或 者 雇 人 到 各 处 去 分 发 。 但 看 起 来 这 
种 方式 似乎 并 不 太 适 合 网 站 的 宣传 ， 因 为 它 
的 涉及 范围 有 限 ， 针 对 性 太 差 。 

其 实 ， 可 以 走出 这 些 思维 定式 ， 在 传统 

告 宣传 上 走出 一 条 非 传统 的 道路 来 。 可 以 
把 自己 网 站 的 相关 广告 信息 印刷 在 精美 的 日 
历 上 、 地 图 上 、 红 包 上 ， 或 者 是 精美 的 纪念 
品 上 。 当 然 更 可 以 印 在 商品 包装 上 ， 以 吸引 
回头 客 。 

5.， 印 塑料 带 

免费 送 给 快餐 店 、 饭 店 、 农 贸 市 场 。 不 
过 这 个 投资 还 是 大 了 点 。 塑 料 带 上 印 上 网 站 
介绍 。 例 如 ， 网 站 名 称 : 就 爱 打折 ; 网 址 : 
www.xxxx.com， 欢 迎 大 家 观看 。 关 键 字 一 定 
要 出 现 ， 即 使 他 们 忘记 了 网 址 也 会 用 百度 去 
搜 的 。 

6. 和 当地 网 吧 合 作 

把 浏览 器 默认 首页 设 为 你 的 网 站 ， 然 后 
在 你 的 网 站 上 给 他 们 网 吧 做 广告 。 能 不 能 
服 网 吧 老板 ， 还 得 看 你 的 个 人 能 力 了 。 


7. 赞助 活动 
当然 ， 别 以 为 赞助 就 一 定 要 给 钱 的 ， 你 可 以 先 了 解 一 下 本 地 最 近 有 什么 活动 ， 免 费 大 力度 
为 他 们 宣传 一 下 ， 其 实 是 借 机 炒作 ， 人 们 会 因为 此 事 而 关注 你 的 网 站 的 。 


本 章 小 结 


很 多 人 认为 ， 只 要 自己 的 网 站 制作 完成 了 就 算 大 功 告 成 ， 别 人 就 可 以 很 快 知道 ， 但 是 实际 
上 没有 推广 的 网 站 每 天 的 流量 只 有 几 个 人 次 ， 甚 至 几 天 都 没有 人 访问 。 所 以 说 网 站 建设 完成 后 
的 首要 工作 应 该 就 是 网 站 推广 。 无 论 是 展示 型 的 企业 网 站 ， 还 是 以 营销 为 目的 的 网 站 ， 获 得 正 
常 的 流量 都 很 重要 。 经 过 推广 的 网 站 可 以 更 好 地 提高 企业 知名 度 、 快 速 获 得 统计 数据 和 反馈 
信息 。 
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网 站 综合 全 


第 了 .3 章 设计 企业 网 站 


目前 ， 越 来 越 多 的 企业 有 了 自己 的 网 站 ， 网 站 是 mtemet 上 宣传 和 反映 企业 形象 和 文化 的 
重要 窗口 。 本 章 将 制作 一 个 典型 的 企业 网 站 。 从 综合 运用 方面 讲述 网 站 的 制作 过 程 。 首 先 讲述 


企业 网 站 的 特点 ， 接 着 讲述 用 Photoshop 设计 网 站 首页 ， 用 Dreamweaver 设计 排版 制作 网 页 。 
通过 大 篇 幅 介 绍 利用 Dreamweaver 创建 本 地 站 点 、 创 建 模板 。 


技术 要 点 


全 了解 网 站 建设 规范 急 在 Dreamweaver 中 进行 页 面 排版 制作 
全 企业 网 站 设计 特点 解析 
会 ”利用 Photoshop 设计 网 站 首页 


网 站 建设 规范 


任何 一 个 网 站 开发 之 前 都 需要 制定 开发 约定 和 规则 ， 这 样 有 利于 项 目的 整体 风格 统一 、 代 
码 的 维护 和 扩展 。 由 于 网 站 项 目 开发 的 分 散 性 、 独 立 性 、 整 合 的 交互 性 等 ， 制 定 一 套 完整 的 约 
定 和 规则 显得 尤为 重要 。 这 些 规则 和 约定 需要 与 开发 人 员 、 设计 人 员 和 维护 人 员 共 同 讨论 制定 
并 将 严格 按 规则 或 约定 开发 。 
33.1.1 ”组 建 开 发 团队 规范 
在 接手 项 目 后 的 第 一 件 事 就 是 组 建 团队 ， 根 据 项 目的 大 小 不 同 ， 团 队 可 以 有 几 十 人 ， 也 有 
可 以 是 只 有 几 个 人 的 小 团队 ， 在 团队 划分 中 应 该 含有 6 个 角色 ， 这 6 个 角色 是 必需 的 ， 分 别 是 
项 目 经 理 、 策 划 、 美 工 、 程 序 员 、 代 码 整 合 员 、 测 试 员 。 如 果 项 目 够 大 ， 人 数 够 多 ， 那 就 分 为 
6 个 组 ， 每 个 组 的 分 工 再 进行 细 分 。 下 面 简单 介绍 一 下 这 6 个 角色 的 具体 职责 。 
。 ”项目 经 理 负责 项 目 总 体 设计 、 开 发 进度 的 定制 和 监控 、 相 应 开发 规范 定制 、 各 个 环节 
的 评审 工作 ， 并 协调 各 个 成 员 小 组 之 间 的 开发 。 
。 ”策划 提供 详细 的 策划 方案 和 需求 分 析 ， 还 包括 后 期 网 站 推广 方面 的 策划 。 
。 美工 根据 策划 和 需求 设计 网 站 VI、 界 面 、LOGO 等 。 
。 程序 员 根 据 项 目 总 体 设计 保证 数据 库 和 功能 模块 的 实现 。 
。 ”代码 整合 员 负 责 将 程序 员 的 代码 和 界面 融合 到 一 起 ， 代 码 整合 员 还 可 以 制作 网 站 的 相 
关 页 面 。 
。 ”测试 员 负责 测试 程序 。 


33.1.2 ”开发 工具 规范 
网 站 开发 工具 主要 分 为 3 部 分 ， 第 一 部 分 是 网 站 前 台 开发 工具 ， 第 二 部 分 是 网 站 后 台 开 发 


环境 。 下 面 分 别 简单 介绍 这 两 部 分 需要 使 用 
的 软件 。 

网 站 前 台 开 发 主要 是 指 网 站 页 面 设 计 。 
包括 网 站 整体 框架 的 建立 、 常 用 图 片 、Flash 
动画 设计 等 ， 使 用 的 软件 主要 是 Photoshop、 
Dreamweaver 和 Flash 等 。 

网 站 后 台 开 发 主要 指 网 站 动态 程序 开发 、 
数据 库 创建 ， 使 用 的 软件 和 技术 主要 是 ASP 
和 数据 库 。ASP 是 一 种 非常 优秀 的 网 站 程序 
开发 语言 ， 以 全 面 的 功能 和 简便 的 编辑 方法 
受到 众多 网 站 开发 者 的 欢迎 。 数 据 库 系统 的 
种 类 非常 多 ， 目 前 以 关系 型 数据 库 系统 最 为 
常见 ， 所 谓 关 系 型 数据 库 系 统 是 以 表 的 类 型 
将 数据 提供 给 用 户 ， 而 所 有 的 数据 库 操作 都 
是 利用 旧 的 表 来 产生 新 的 表 。 常 见 的 关系 型 
数据 库 包括 Access 和 SQL Server。 


33.1.3” 超 链接 规范 


网 页 中 的 超 链 接 路 径 可 以 分 为 3 种 形式 
绝对 路 径 、 相 对 路 径 、 根 目录 相对 路 径 。 

小 网 站 由 于 层次 简单 ， 文 件 夹 结构 不 过 
两 三 层 ， 而 且 网 站 内 容 、 结 构 的 改动 性 太 小 ， 
所 以 使 用 相对 路 径 是 完全 可 以 胜任 的 。 

当 网 站 的 规模 大 一 些 的 时 候 ， 由 于 文件 

夹 结构 越 来 越 复杂 ， 且 基于 模板 的 设计 方法 
被 广泛 使 用 ， 使 用 相对 路 径 会 出 现 如 “ 超 链 
接 代码 过 长 ”、“ 模 板 中 的 超 链接 在 不 同 的 
文件 夹 结构 层次 中 无 法 直接 使 用 ”等 问题 。 
此 时 使 用 根 目 录 相对 路 径 是 理想 的 选择 ， 它 
可 以 使 超 链接 的 指向 变 得 绝对 化 ， 无 论 在 网 
站 的 哪 一 级 文件 夹 中 ， 根 目录 相对 路 径 都 能 
够 准确 指向 。 
当 网 站 规模 再 度 增长 ， 发 展 成 为 拥有 一 
系列 子 网 站 的 网 站 群 的 时 候 ， 各 个 网 站 之 间 
的 超 链接 就 不 得 不 采用 绝对 路 径 。 为 了 方便 
网 站 群 中 的 各 个 网 站 共享 ， 过 去 在 单 域名 网 
站 中 以 文件 夹 方式 存放 的 各 种 公共 设计 资源 ， 
最 好 采用 独立 资源 网 站 的 形式 进行 存放 ， 各 
子 网 站 可 以 使 用 绝对 路 径 对 其 进行 调用 。 


网 站 的 超 链接 设计 是 一 个 很 老 的 话题 ， 
而 且 也 非常 重要 。 设 计 和 应 用 超 链接 确实 是 
一 项 对 设计 人 员 的 规划 能 力 要 求 非常 高 的 工 
作 ， 而 且 这 些 规 划 能 力 多 数 是 靠 经 验 积累 来 
获得 的 ， 所 以 要 善于 和 勤 于 总 结 。 


33.1.4 ”文件 夹 和 文件 命名 规范 


文件 夹 命名 一 般 采 用 英文 ， 长 度 一 般 不 
超过 20 个 字符 ， 命 名 采用 小 写字 母 。 文 件 名 
称 统一 用 小 写 的 英文 字母 、 数 字 和 下 画 线 的 
组 合 。 命 名 原则 的 指导 思想 一 是 使 得 工作 组 
的 每 一 个 成 员 能 够 方便 地 理解 每 一 个 文件 的 
意义 ， 二 是 当 在 文件 夹 中 使 用 “ 按 名 称 排列 ” 
命令 时 , 同一 种 大 类 的 文件 能 够 排列 在 一 起 ， 
以 便 查找 、 修 改 、 替 换 等 操作 。 

在 给 文件 和 文件 夹 命 名 时 注意 以 下 规则 : 

1. 尽量 不 使 用 难 理解 的 缩写 词 

不 要 使 用 不 易 理解 的 缩写 词 ， 尤 其 是 仅 
取 首 字母 的 缩写 词 。 在 网 站 设计 中 ， 设 计 人 
员 往 往 会 使 用 一 些 只 有 自己 才 明白 的 缩写 词 ， 
这 些 缩写 词 的 使 用 会 给 站 点 的 维护 带 来 隐患 。 
如 xwhtgl、xwhtdl， 如 果 不 告 诉 你 这 是 “新 闻 
后 台 管理 ”和 “新 闻 后 台 登 录 ” 的 拼音 缩写 ， 
没有 人 能 知道 是 什么 意思 。 

2. 不 重复 使 用 本 文件 夹 ， 或 者 其 他 上 层 
文件 夹 的 名 称 

重复 本 文件 夹 或 者 上 层 文件 夹 名 称 会 增 
长 文件 名 、 文 件 夹 名 的 长 度 ， 导 致 设计 中 
的 不 便 。 如 果 在 images 文件 夹 中 建立 一 个 
banner 文件 夹 用 于 存放 广告 ， 那 么 就 不 应 该 
在 每 一 个 banner 的 命名 中 加 入 “banner” 前 级 。 

3 加强 对 临时 文件 夹 和 临时 文件 的 管理 

有 些 文件 或 者 文件 夹 是 为 临时 的 目的 而 
建立 的 ， 如 一 些 短期 的 网 站 通告 或 者 促销 信 
息 、 临 时 文件 下 载 等 。 不 要 随意 放置 这 些 文 
件 和 文件 夹 。 一 种 比较 理想 的 方法 是 建立 一 
个 临时 文件 夹 来 放置 各 种 临时 文件 ， 并 适当 
使 用 简单 的 命名 规范 ， 不 定期 地 进行 清理 ， 
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将 陈旧 的 文件 及 时 删除 。 


4. 在 文件 及 文件 夹 的 命名 中 避免 使 用 特 
殊 符号 


特殊 符号 包括 bad 国 bike “Eg » 等 
会 导致 网 站 不 能 正常 工作 的 字符 ， 以 及 中 文 
双 字 节 的 所 有 标点 符号 。 


5.， 在 组 合 词 中 使 用 连 字 符 

在 某 些 命名 用 词 中 ， 可 以 根据 词义 ， 使 
用 连 字符 将 它们 组 合 起 来 。 

33.1.5 ”代码 设计 规范 

一 个 良好 的 程序 编码 风格 有 利于 系统 的 
维护 ， 也 易于 阅读 查 错 代码 。 在 编写 代码 时 
注意 以 下 规范 : 

1. 大 小 写 规范 

HTML 文件 是 由 大 量 标记 组 成 的 ， 如 
<a>、<td>、<img> 等 ， 每 个 标记 又 由 各 种 属 
性 组 成 ， 标 记 有 起 始 和 结尾 标记 。 每 一 个 标 
记 都 有 名 称 和 若干 属性 ， 标 记 的 名 称 和 属性 
都 在 起 始 标记 内 标明 。 

HIML 语言 本 身 不 区 分 大 小 写 ， 如 
<title> 和 <TITLE> 是 一 样 的 ， 但 作为 严谨 的 
网 页 设计 师 ， 应 该 确保 每 个 网 页 的 HTML 代 
码 使 用 统一 的 大 小 写 方式 。 习 惯 上 将 HTML 
的 代码 使 用 “小 写 ” 书 写 方式 。 

2. 字体 和 格式 规范 

良好 的 代码 编写 格式 能 够 使 团队 中 所 有 
设计 人 员 更 好 地 进行 代码 维护 。 

规范 化 代码 编写 的 第 一 步 是 统一 编写 环 


企业 网 站 设计 特点 解析 


境 ， 设 计 团队 中 所 使 用 的 编写 软件 应 尽 可 能 一 
致 。 代 码 的 文本 编辑 ， 要 尽 可 能 使 用 等 宽 字符 ， 
而 不 是 等 比例 字体 ， 这 样 可 以 很 容易 地 进行 代 
码 缩 进 和 文字 对 齐 调整 。 等 宽 字体 的 含义 是 指 
每 一 个 英文 字符 的 宽度 都 是 相同 的 。 

在 HTML 代码 编写 中 ， 使 用 缩 进 也 是 一 
项 重要 的 规范 。 缩 进 的 代码 量 应 事先 确定 ， 
并 在 设计 团队 中 进行 统一 , 通常 情况 下 应 为 2、 
4 或 8 个 字符 。 

3. 注释 规范 

网 页 中 的 注释 用 于 代码 功能 的 解释 和 说 
明 ， 以 提高 网 页 的 可 读 性 和 可 维护 性 。 

注释 的 内 容 应 随 着 被 注释 代码 的 更 新 而 
更 新 ， 不 能 只 修改 代码 而 不 修改 注释 ， 不 要 
将 注释 写 在 代码 后 ， 而 应 该 写 在 相应 的 代码 
前 面 ， 否 则 会 使 注释 的 可 读 性 下 降 。 

如 果 某 个 网 页 是 由 多 个 部 件 组 合 而 成 的 ， 
而 且 每 个 部 件 都 有 自己 的 起 始 注释 ， 那 么 这 
些 起 始 注释 应 该 配对 使 用 ， 如 Start/Stop， 
Begin/End 等 , 而 且 这 些 注释 的 缩 进 应 该 一 致 

不 要 使 用 混乱 的 注释 格式 ， 如 在 某 些 页 
面 使 用 “*”， 而 在 其 他 页 面 使 用 “#”， 而 
应 该 使 用 一 种 简明 、 统 一 的 注释 格式 ， 并 且 
在 网 站 设计 中 贯穿 始终 。 

应 减少 网 页 中 不 必要 的 注释 ， 但 是 在 需 
要 注释 的 地 方 ， 应 该 简明 扼要 地 进行 注释 。 
使 用 注释 的 目的 是 为 了 让 代码 更 容易 维护 ， 
但 是 过 于 简短 的 和 不 严谨 的 注释 将 同样 妨碍 
设计 人 员 的 理解 。 


在 企业 网 站 的 设计 中 ， 既 要 考虑 商业 性 ， 又 考虑 艺术 性 ， 企 业 网 站 是 商业 性 和 艺术 性 的 结 
合 。 好 的 网 站 设计 ， 有 助 于 企业 树立 好 的 社会 形象 ， 更 好 、 更 直观 地 展示 企业 的 产品 和 服务 。 
好 的 企业 网 站 首先 看 商业 性 设计 ， 包 括 功能 设计 、 栏 目 设计 、 页 面 设 计 等 。 和 商业 性 相对 应 的 
就 是 艺术 性 ， 艺 术 性 要 求 怎么 更 好 地 传达 信息 ， 怎 样 让 访问 者 更 好 地 接触 信息 ， 怎 样 给 访问 者 
创造 一 个 愉悦 的 视觉 环境 ， 留 住 访问 者 的 视线 等 。 
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33.2.1 企业 网 站 分 类 

企业 网 站 可 以 分 为 以 下 几 类 : 

1 以 形象 为 主 的 企业 网 站 

以 形象 为 主 的 企业 网 站 的 目的 重 在 宣传 企业 文化 ， 塑 造 企业 形象 ， 消 除 企业 与 消费 者 之 间 
的 距离 感 ， 主 要 围绕 企业 及 产品 、 服 务 信息 进行 网 络 宣传 ， 通 过 网 站 树立 企业 的 形象 。 互 联网 
作为 一 种 新 型 传播 媒体 ， 在 企业 宣传 中 发 挥 越 来 越 重要 的 作用 ， 成 为 公司 宣传 企业 形象 、 开 辟 
营销 渠道 、 加 强 与 客户 沟通 的 一 项 必 不 可 少 的 重要 工具 。 

这 类 网 站 设计 时 要 参考 一 些 大 型 同行 业 网 站 进行 分 析 ， 多 吸收 它们 的 优点 ， 以 公司 自己 的 
特色 进行 设计 ， 整 个 网 站 要 以 国际 化 为 主 。 以 企业 形象 及 行业 特色 加 上 动感 音乐 作 片头 动画 ， 
每 个 页 面 配 以 栏目 相关 的 动画 衬托 ， 通 过 良好 的 网 站 视觉 创造 一 种 独特 的 企业 文化 。 如 图 33-1 
所 示 是 以 形象 为 主 的 企业 网 站 。 

2， 以 产品 为 主 的 企业 网 站 

企业 上 网 绝 大 多 数 是 为 了 介绍 自己 的 产品 ， 中 小 型 企业 尤其 如 此 ， 在 公司 介绍 栏目 中 只 有 
一 页 文字 ， 而 产品 栏目 则 是 大 量 的 图 片 和 文字 。 以 产品 为 主 的 企业 网 站 可 以 把 主推 产品 放置 在 
网 站 首页 。 产 品 资料 分 类 整理 ， 附 带 详细 说 明 ， 使 客户 能 够 看 个 明白 。 为 了 醒目 ， 可 以 分 出 两 
个 导航 条 ， 把 产品 导航 放 在 明显 的 地 方 ， 或 是 用 特殊 样式 的 导航 按钮 标注 出 产品 分 类 。 网 页 的 
插图 应 以 体现 产品 为 主 ， 营 造 企业 形象 为 辅 ， 尽 量 做 到 两 方面 能 够 协调 到 位 。 如 图 33-2 所 示 
是 以 产品 为 主 的 企业 网 站 。 


我 们 ， 引 领 专业 ， 成 就 从 


图 33-1 以 形象 为 主 的 企业 网 站 图 33-2 以 产品 为 主 的 企业 网 站 


3. 商务 型 企业 网 站 

很 多 企业 不 仅仅 需要 树立 良好 的 企业 形象 ， 还 需要 建立 自己 的 信息 平台 。 有 实力 的 企业 逐 
渐 把 网 站 做 成 一 种 以 其 产品 为 主 的 商务 型 网 站 。 对 于 企业 而 言 ， 通 过 商务 网 站 可 以 实现 以 下 功 
能 : 通过 因特网 扩大 宣传 ， 提 高 企业 知名 度 ; 让 更 多 客户 以 更 便捷 的 方式 了 解 企业 产品 ， 实 现 
网 上 订购 、 网 上 信息 实时 反馈 等 电子 商务 功能 。 

一 方面 ， 网 站 的 信息 量 大 、 结 构 设 计 要 大 气 简洁 ， 保 证 速度 和 节奏 感 ， 另 一 方面 ， 它 不 同 
于 单纯 的 信息 型 网 站 ， 从 内 容 到 形象 都 应 该 围绕 公司 的 一 切 ， 既 要 大 气 ， 又 要 有 特色 。 如 图 
33-3 所 示 为 商务 型 企业 网 站 。 
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图 33-3 商务 型 企业 网 站 


33.2.2 ”功能 规划 

企业 网 站 是 以 企业 宣传 为 主题 而 构建 的 
网 站 ， 域 名 后 级 一 般 为 .com。 与 一 般 门户 型 
网 站 不 同 , 企业 网 站 相对 来 说 信息 量 比较 少 。 
该 类 型 网 站 页 面 结构 的 设计 主要 是 从 公司 简 
介 、 产 品 展示 、 服 务 等 几 个 方面 来 进行 的 。 
一 般 企业 网 站 页 面 结构 如 图 33-4 所 示 。 

Cssmen | 


站 上 地 图 | 设 为 首页 ”| 了 ai 


| 首页 | 关于 车 们 | | 新 闻 中 心 | | 产品 次 讯 | 表决 方案 | | 成 功 这 例 | | 客户 服务 。 | 合作 短 道 


| 产品 尝 区 公司 位 介 | 公司 新 闻 i dm 系 BZ 一 支 闻 培训 。 | 销售 网 次 
最 新 案例 | ”公司 资质 | | 行业 动态 热点 产品 | | 方案 之 二 | | 寄 例 之 二 | FW 系统。 | 合作 伙伴 
新 闻 动态 | 企业 文化 | | 媒体 报道 ， | 产品 展示 | 方案 之 三 。 | 守 例 之 三 。 | 客户 反馈 | 友 导 链接 

CE eT 

钥 织 架构 


图 33-4 企业 网 站 页 面 结构 
一 般 企 业 网 站 主要 有 以 下 功能 : 
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公司 概况 : 包括 公司 背景 、 发 展 历史 、 
主要 业绩 、 经 营 理 念 、 经 营 目标 及 组 
织 结构 等 ， 让 用 户 对 公司 的 情况 有 一 
个 概括 的 了 解 。 

企业 新 闻 动 态 : 可 以 利用 互联 网 的 信 
息 传播 优势 ， 构 建 一 个 企业 新 闻 发 
布 平台 ， 通 过 建立 一 个 新 闻 发 布 / 管 
理 系 统 ， 企 业 信息 发 布 与 管理 将 变 得 
简单 、 迅 速 ， 及 时 向 互联 网 发 布 本 企 
业 的 新 闻 、 行 业 新 闻 等 信息 。 通 过 公 
司 动态 可 以 让 用 户 了 解 公 司 的 发 展 动 
向 ， 加 深 对 公司 的 印象 ， 从 而 达到 展 
示 为 企业 实力 和 形象 的 目的 。 如 图 
33-5 所 示 为 企业 新 闻 动 态 。 


图 33-5 企业 新 闻 动 态 


网 上 招聘 : 这 也 是 网 络 应 用 的 一 个 重 
要 方面 ， 网 上 招聘 系统 可 以 根据 企业 
自身 特点 , 建立 一 个 企业 网 络 人 才 库 ， 
人 才 库 对 外 可 以 进行 在 线 网 络 即 时 招 
聘 ， 对 内 可 以 方便 管理 人 员 对 招聘 信 
息 和 应 聘 人 员 的 管理 ， 同 时 人 才 库 可 
以 为 企业 储备 人 才 ， 以 备 日 后 需要 时 
使 用 。 

销售 网 络 : 目前 用 户 直 接 在 网 站 订货 
的 并 不 多 ， 但 网 上 看 货 网 下 购买 的 现 
象 比较 普遍 ， 尤 其 是 价格 比较 贵重 或 
销售 渠道 比较 少 的 商品 ， 用 户 通常 喜 


所 示 为 企业 产品 展示 系统 。 


欢 通过 网 络 获取 足够 信息 后 在 本 地 的 
实体 商场 购买 。 因 此 尽 可 能 详尽 地 告 
诉 用 户 在 什么 地 方 可 以 买 到 他 所 需要 
的 产品 。 

产品 展示 : 如 果 企业 提供 多 种 产品 服 
务 ， 利 用 产品 展示 系统 对 产品 进行 系 
统 的 管理 ， 包 括 产 品 的 添加 与 删除 、 产 
品类 别 的 添加 与 删除 、 特 价 产品 和 最 新 
产品 、 推 荐 产品 的 管理 、 产 品 的 快速 搜 
索 等 。 可 以 方便 高 效 地 管理 网 上 产品 ， 
为 网 上 客户 提供 一 个 全 面 的 产品 展示 平 
台 ， 更 重要 的 是 网 站 可 以 通过 某 种 方式 
建立 起 与 客户 的 有 效 沟 通 ， 更 好 地 与 客 
户 进行 对 话 ， 收 集 反 馈 信 息 ， 从 而 改 
进 产品 质量 和 提供 服务 水 平 。 如 图 33-6 


PR 


es 1 金 5 /人 
1 2 


图 33-6 企业 产品 展示 系统 


产品 搜索 : 如 果 公 司 产品 比较 多 ， 无 
法 在 简单 的 目录 中 全 部 列 出 ， 而 且 经 
常 有 产品 升级 换代 ， 为 了 让 用 户 能 够 
方便 地 找到 所 需要 的 产品 ， 除 了 设计 
详细 的 分 级 目录 之 外 ， 增 加 关键 词 搜 
索 功能 不 失 为 有 效 的 措施 。 

售后 服务 : 有 关 质 量 保证 条 款 、 售 后 
服务 措施 ， 以 及 各 地 售后 服务 的 联系 
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方式 等 都 是 用 户 比 较 关 心 的 信息 ， 而 
且 ， 是 否 可 以 在 本 地 获得 售后 服务 往 
往 是 影响 用 户 购 买 决策 的 重要 因素 
对 于 这 些 信息 应 该 尽 可 能 详细 地 提供 。 
技术 支持 : 这 一 点 对 于 生产 或 销售 高 
科技 产品 的 公司 尤为 重要 ， 网 站 上 除 
了 产品 说 明 书 之 外 ， 企 业 还 应 该 将 用 
户 关心 的 技术 问题 及 其 答案 公布 在 网 
上 ， 如 一 些 常见 故障 处 理 、 产 品 的 驱 
动 程序 、 软 件 工具 的 版 本 等 信息 资料 ， 
可 以 用 在 线 提问 或 常见 问题 回答 的 方 
式 体现 。 如 图 33-7 所 示 为 企业 网 站 
的 技术 支持 页 面 。 


3O3SDyOFE Si se Tasmans War smn | u 


mk 


图 33-7 企业 网 站 的 技术 支持 页 面 


联系 信息 : 网 站 上 应 该 提供 足够 详尽 
的 联系 信息 , 除了 公司 的 地 址 、 电 话 、 
传真 、 邮 政 编码 、 网 管 E-mail 地 址 
等 基本 信息 之 外 ， 最 好 能 详细 地 列 出 
客户 或 者 业务 伙伴 可 能 需要 联系 的 具 
体 部 门 的 联系 方式 。 对 于 有 分 支 机 构 
的 企业 ， 同 时 还 应 当 有 各 地 分 支 机 构 
的 联系 方式 ， 在 为 用 户 提 供 方便 的 同 
时 ,也 起 到 了 对 各 地 业务 的 支持 作用 。 
辅助 信息 : 有 时 由 于 企业 产品 比较 
少 ， 网 页 内 容 显得 有 些 单调 ， 可 以 
通过 增加 一 些 辅助 信息 来 弥补 这 种 不 
足 。 辅 助 信息 的 内 容 比较 广泛 ， 可 以 
是 本 公司 、 合 作 伙伴 、 经 销 商 或 用 户 
的 一 些 相关 新 闻 、 趣 事 ， 或 产品 保养 
/维修 常识 等 。 
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33.2.3 ”创意 分 析 

企业 网 站 主要 功能 是 向 消费 者 传递 信息 ， 因 此 在 页 面 结构 设计 上 无 须 太 过 花哨 ， 标 新 立 异 
的 设计 和 布局 未 必 适 合 企业 网 站 ， 企 业 网 站 更 应 该 注重 商务 性 与 实用 性 。 

在 设计 企业 网 站 时 ， 要 采用 统一 的 风格 和 结构 来 把 各 页 面 组 织 在 一 起 。 所 选择 的 颜色 、 字 
体 、 图 形 即 页 面 布 局 应 能 传达 给 用 户 一 个 形象 化 的 主题 ， 并 引导 他 们 去 关注 站 点 的 内 容 。 

从 设计 风格 上 对 企业 网 站 进行 创新 ， 需 要 多 方面 元 素 的 配合 ， 如 页 面色 彩 构 成 、 图 片 布局 、 
内 容 安 排 等 。 这 需要 用 不 同 的 设计 手法 表现 出 页 面 的 视觉 效果 。 

突出 企业 网 站 风格 的 设计 ， 往 往 与 产品 或 企业 文化 有 很 大 关系 。 只 有 把 握 住 企业 文化 的 特 
征 ， 了 解 企 业 产品 的 性 质 ， 才 能 在 企业 网 站 设计 中 很 好 地 表现 其 独特 的 风格 。 

企业 网 站 的 风格 体现 在 企业 的 LOGO、CI， 以 及 企业 的 用 色 等 多 方面 。 企 业 用 什么 样 的 色 
调 ， 以 及 用 什么 样 的 CI， 是 区 别 于 其 他 企业 的 一 种 重要 手段 。 如 果 风 格 设计 得 不 好 会 对 客户 
造成 不 良 影响 。 如 图 33-8 所 示 的 企业 网 站 风格 与 企业 的 CI 一 致 。 
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图 33-8 网 站 的 风格 与 企业 的 CI 一致 


33.2.4 ”色彩 搭配 

企业 网 站 给 人 的 第 一 印象 是 网 站 的 色彩 ， 因 此 确定 网 站 的 色彩 搭配 是 相当 重要 的 一 步 。 一 
般 来 说 ， 一 个 网 站 的 标准 色彩 不 应 超过 3 种 ， 太 多 则 让 人 眼花 综 乱 。 标 准 色彩 用 于 网 站 的 标志 、 
标题 、 导 航 栏 和 主 色 块 ， 给 人 以 整体 统一 的 感觉 。 至 于 其 他 色彩 ， 在 网 站 中 也 可 以 使 用 ,但 只 
能 作为 点 缀 和 衬托 ， 绝 不 能 喧 宾 夺 主 。 

企业 网 站 的 色彩 可 以 选择 蓝 色 、 绿 色 、 红 色 等 ， 在 此 基础 上 再 搭配 其 他 色彩 。 另 外 ， 可 以 
使 用 灰色 和 白色 ， 这 是 企业 网 站 中 最 常见 的 颜色 。 因 为 这 两 种 颜色 比较 中 庸 ， 能 和 任何 色彩 搭 
配 ， 使 对 比 更 强烈 ， 突 出 网 站 的 品质 和 形象 。 
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利用 Photoshop 设计 网 站 首页 


本 节 讲 述 利用 Photoshop 设计 网 站 首页 ， 效 果 如 图 33-9 所 示 。 


康 庄 国际 商业 广场 


图 33-9 网 站 主页 


33.3.1 制作 页 面 背景 

首先 制作 页 面 背 景 ， 具 体操 作 步 骤 如 下 : 
三 执行 “文件 ”| “新建 ” 命 令 ， 弹 出 “新 建 ” 
对 话 框 ， 将 “宽度 ”设置 为 1030、“ 高 度 ” 
设置 为 9932， 如 图 33-10 所 示 。 


名 称 (N): 加 王强 [| 


祯 设 (P): 自 定 4 取消 
存 络 祯 设 (5)… 


宽度 (W):|1030 
高 度 (H): 950 
分 状 率 (R): 72 
颜色 模式 (M); RGB 颜色 Y 
背景 内 容 (C): 白色 


己 ) 高 级 


图 33-10 “新 建 ” 对 话 框 


02 单 击 “ 确定 ”按钮 , 即 可 新 建 一 个 空白 文档 ， 
如 图 33-11 所 示 。 

08 选择 工具 箱 中 的 “渐变 工具 ”， 在 选项 栏 
中 单 击 “ 点 按 可 编辑 渐变 拾 色 器 ”按钮 ， 弹 
出 “渐变 编辑 器 ”对 话 框 ， 在 该 对 话 框 中 设 
置 渐变 颜色 ， 如 图 33-12 所 示 。 


六 一 ] 
pa 
六 载 X(D.- 
(5) 
名 (0。 | 而 至 六 @ 用 页 和 
TE 
扩展 (W): 100 1]% 
恒 同 
a a 
色 标 


图 33-12 设置 渐变 颜色 


有 吗 单 击 “ 确 定 ” 按 钮 ， 完 成 渐变 颜色 的 设 
置 ， 在 舞台 中 从 上 往 下 拖 动 以 填充 渐变 ， 如 
图 33-13 所 示 。 


图 33-13 填充 渐变 
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33.3.2 置 入 banner 

本 节 讲 述 置 入 网 站 banner， 具 体操 作 步 
骤 如 下 : 
国 执行“ 文件 ”|“ 置 入 ”命令 ,弹出 “ 置 入 ” 
对 话 框 ， 在 该 对 话 框 中 选择 图 像 文件 banner 
jpg， 如 图 33-14 所 示 。 


图 33-14 置 入 图 像 


本 单 击 “ 置 入 ”按钮 ， 置 入 图 像 文件 ， 将 图 
像 拖 动 到 合适 的 位 置 ， 如 图 33-15 所 示 。 


图 33-15 置 入 图 像 


03 选择 工具 箱 中 的 “ 横 排 文字 工具 ”， 在 选 
项 栏 中 设置 文本 参数 ， 然 后 在 置 入 的 图 像 上 
面 输入 相应 的 文本 ， 如 图 33-16 所 示 。 


; 康 庄 国际 商业 广场 


图 33-16 输入 文本 
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吗 执 行 “ 图 层 ” |* 图 层 样式 ”|“ 描 边 ” 命 令 ， 
弹出 “图 层 样式 ”对 话 框 , 在 该 对 话 框 中 将 “大 
小 ”设置 为 3、“ 颜 色 ” 设 置 为 #ac0000， 如 
图 33-17 所 示 。 


[| 
2 
样式 (W)- 
区 


设 机 办 交 | 生僻 为 可 条 


图 33-17 “图 层 样式 ”对 话 框 


05 单 击 “确定 ”按钮 ， 描 边 效果 如 图 33-18 
所 示 。 


康 庄 国际 高 业 户 场 在- 
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图 33-18 描 边 效果 


33.3.3 ”制作 导航 部 分 


本 节 讲 述 导航 部 分 的 制作 ， 具 体操 作 步 
又 如 下 : 
0 选择 工具 箱 中 的 “ 自 定 形状 工具 ”， 在 选 
项 栏 中 单 击 “ 形 状 ” 右 边 的 下 拉 按 钮 ， 在 弹 
出 的 下 拉 列 表 中 选择 相应 的 形状 ， 如 图 33-19 
所 示 。 


图 33-19 选择 形状 


@ 
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本 单 击 “填充 ”按钮 ， 在 弹出 的 下 拉 列 表 中 加 5 单 击 “ 确 定 ” 按 钮 ， 给 图 形 添加 斜面 和 浮 
设置 渐变 颜色 ， 如 图 33-20 所 示 。 雕 效果 ， 如 图 33-23 所 示 。 


和 二: [于 3ib: 23 := 


ul 0 


图 33-23 “斜面 和 浮雕 ”效果 
图 33-20 设置 渐变 颜色 06 选择 工具 箱 中 的 “ 横 排 文字 工具 ”， 在 舞 


台中 输入 导航 文本 ， 如 图 33-24 所 示 。 
枉 在 舞台 中 按 住 鼠标 拖 动 绘制 形状 , 如 图 “” ”、 ” 
33-21 所 示 。 re eee 


rp 图 33-24 输入 导航 文本 
图 33-21 绘制 形状 


国 执 生 “图 层 ”| “图 尼 样 式 "| “他 面 和 汉 具 ”4 害 作 千岁 正 文 站 守 
命令 弹出 “图 层 样 式 ”对 计 框 ， 在 该 对 话 | 本 节制 作 首页 正文 内 容 ， 具 体操 作 步 邓 
框 中 设置 相应 的 参数 ， 如 图 33-22 所 示 。 和 

面 选择 工具 箱 中 的 “矩形 工具 ”， 在 舞台 中 
一 融 一 | 绘制 矩形 ， 如 图 33-25 所 示 。 
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图 33-25 绘制 矩形 


图 33-22 “图 层 样式 ”对 话 框 
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本 执行 “图 层 ”|“ 图 层 样式 ”|“ 混 合 选项 ” 命令, 弹出 “图 层 样式 ”对 话 框 , 设置 相关 参数 ， 
命令 ， 弹 出 “图 层 样式 ”对 话 框 ， 在 该 对 话 “如 图 33-29 所 示 。 
框 中 设置 相应 的 参数 ， 如 图 33-26 所 示 。 


证 
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图 33-29 “渐变 登 加 ”图 层 样式 设置 


图 33-26 “图 层 样式 ”对 话 框 砚 打开 “渐变 编辑 器 ”对 话 框 ， 在 该 对 话 框 
西单 击 “ 确 定 ” 按 钮 ， 添 加 图 层 样式 ， 如 图 中 选择 渐变 颜色 ， 如 图 33-30 所 示 。 
33-27 所 示 。 


Ce— 
康 庄 国际 商业 广场 


各 济 (N); 紧 , 绎 , 信安 


we 


源 下 2T): | FE > 
N100 ， 和 


图 33-27 添加 图 层 样式 
吧 选择 工具 箱 中 的 “ 横 排 文字 工具 ”， 在 舞 图 33-30 设置 渐变 色 


台中 输入 文本 “新 闻 中 心 ”， 如 图 33-28 所 示 。 


叹 单 击 “ 确 定 ” 按 钮 ， 填 充 渐变 色 ， 如 图 
33-31 所 示 。 


康 庄 国际 商业 户 志 
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康 庄 国际 商业 户 声 | 


图 33-28 输入 文本 


丁 执 行 “ 图 层 ”| “图 层 样式 ”| “ 浙 变 闪 加 ” 图 33.31 填充 源 变 色 
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08 按 步 骤 04 ~ 07 的 操作 输入 相应 的 文本 ， 
并 设置 渐变 共 加 ， 如 图 33-32 所 示 。 


图 33-32 输入 文本 


叮 执 行 “ 文 件 ”|“ 置 入 ”命令 ， 置 入 图 像 文 
件 并 将 其 拖 动 到 合适 的 位 置 , 如 图 33-33 所 示 。 


图 33-33 置 入 图 像 文本 


选择 工具 箱 中 的 “ 自 定形 状 工具 ”， 在 选 
项 栏 中 的 “形状 ”下 拉 列 表 中 选择 相应 的 形状 ， 
将 填充 颜色 设置 为 #ff0000， 在 舞台 中 绘制 形 
状 ， 如 图 33-34 所 示 。 


图 33-34 绘制 形状 


品 按 步骤 10 的 方法 绘制 多 个 形状 ， 
33-35 所 示 。 
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图 33-35 绘制 形状 


晤 选择 工具 箱 中 的 “ 圆 角 矩形 工具 ”， 在 选 
项 栏 中 将 填充 颜色 设置 为 #ftftFf、 描 边 颜色 设 
置 为 #f26522、 描 边 宽度 设置 为 2， 在 舞台 中 
绘制 圆 角 矩 形 ， 如 图 33-36 所 示 。 


图 33-36 绘制 圆 角 矩形 


镶 选择 工具 箱 中 的 “ 横 排 文字 工具 ”， 在 舞 
台中 输入 相应 的 文本 ， 如 图 33-37 所 示 。 


图 33-37 输入 文本 


33.3.5 ”制作 版 权 信息 
本 节制 作 版 权 信息 ， 具 体操 作 步 骤 如 下 : 
而 选择 工具 箱 中 的 “线条 工具 ”， 在 选项 栏 
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中 将 填充 颜色 设置 为 #26522、“ 粗 细 ” 设 置 为 
2， 在 舞台 中 绘制 直线 ， 如 图 33-38 所 示 。 


图 33-38 绘制 直线 


02 选择 工具 箱 中 的 “ 横 排 文字 工具 ”， 在 舞 
台 底 部 输入 版 权 信息 文本 ， 如 图 33-39 所 示 。 


图 33-39 输入 文本 


吗 执 行 “文件 ”| 另存 为 命令 , 弹出 “另存 为 ” 


对 话 框 ， 在 对 话 框 中 的 “文件 名 ”组 合 框 中 
输入 index， 如 图 33-40 所 示 。 

04 单 击 “ 保 存 ”按钮 保存 文 档 ， 如 图 33-41 
所 示 。 


图 33-40 “另存 为 ”对 话 框 
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图 33-41 保存 文档 


33.3.6 ”切割 首页 
切片 就 是 将 一 幅 大 图 像 分 割 为 一 些小 的 
图 像 切片 ， 然 后 在 网 页 中 通过 没有 间距 和 宽 
度 的 表格 重新 将 这 些小 的 图 像 没 有 缝隙 地 拼 
接 起 来 ， 成 为 一 幅 完整 的 图 像 。 本 节 介 绍 切 
割 网 站 首页 的 操作 ， 具 体操 作 步 又 如 下 : 
加 打开 制作 好 的 图 像 文件 ， 选 择 工具 箱 中 的 
“切片 工具 ”， 如 图 33-42 所 示 。 


; 训 让 国际 商业 广场 把- 


图 33-42 打开 图 像 文件 


02 在 舞台 中 按 住 鼠 标 绘制 切片 ， 如 图 33-43 
所 示 。 
03 同步 骤 2 绘制 其 余 更 多 的 切片 ， 如 图 33-43 
所 示 。 


第 33 章 ， 设 计 企业 网 站 


Ee 


>“ 康 庄 国际 商业 广场 


图 33-43 绘制 切片 图 33-44 绘制 更 多 切片 
吗 执 行 “ 文 件 ”|“ 存 储 为 Web 所 用 格式 ”命令 ， 弹 出 “存储 为 Web 所 用 格式 ”对 话 框 ， 如 
图 33-45 所 示 。 


呵 单 击 “ 存 储 ” 按 钮 ， 打开 “将 优化 结果 存储 为 ”对 话 框 , 将 “文件 名 ” 设 为 “index.html”,“ 格 
式 ” 选 择 “HTML 和 图 像 ”， 如 图 33-46 所 示 。 


3 二 3 


图 33-45 “存储 为 Web 所 用 格式 ”对 话 框 图 33-46 “将 优化 结果 存储 为 ”对 话 框 
06 单 击 “ 保 存 ” 按 钮 , 即 可 保存 文档 。 在 本 地 文件 中 打开 网 页 文件 进行 预览 , 效果 如 图 33-47 所 示 。 


康 庄 国际 商业 广场 和 福 


图 33-47 预览 效果 
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在 Dreamweaver 中 进行 页 面 排版 制作 


Dreamweaver 是 目前 最 优秀 的 网 页 编辑 和 网 站 管理 软件 ， 对 于 广大 网 页 制作 爱好 者 来 说 ， 
熟练 掌握 该 软件 的 使 用 ， 不 但 能 够 制作 出 高 水 平 的 网 页 ， 而 且 能 更 快 地 转向 专业 制作 领域 。 
33.4.1 创建 本 地 站 点 

创建 本 地 站 点 的 具体 操作 步骤 如 下 : 

三 执行 “站 点 ”| “管理 站 点 ”命令 , 弹出 “ 管 
理 站 点 ”对 话 框 , 在 对 话 框 中 单 击 “ 新 建站 点 ” 
按钮 ， 如 图 33-48 所 示 。 


图 33-50 “选择 根 文件 夹 ” 对 话 框 


Pr 


条 民 有 此 由 为 orexsneaver 站 志和 本 六 文件 内 和 各 秆 。 


图 33-48 “管理 站 点 ”对 话 框 
02 弹出 “站 点 设置 对 象 未 命名 站 点 2” 对话 
框 , 在 对 话 框 中 “站 点 ”选项 卡 的 “站 点 名 称 ” 
文本 框 中 输入 名 称 ， 如 图 33-49 所 示 。 


图 33-51 选择 文件 的 位 置 


区 梧 以 在 此 外 为 Dreammweeve 外向 造 择 下 汉文 性 天 和 各 冤 。 


| | 
sn iii | 两 单 击 “ 保 在 ”按钮 ,返回 到 “管理 站 点 ” 
对 话 框 ， 对 话 框 中 显示 了 新 建 的 站 点 ， 如 图 
33-52 所 示 。 


图 33-49 输入 站 点 的 名 称 


03 单 击 “ 本 地 站 点 文件 夹 ”文本 框 右边 的 文 
件 夹 按 钮 辑 ， 弹 出 “选择 根 文件 夹 ”对 话 框 ， 
在 对 话 框 中 选择 相应 的 位 置 ， 如 图 33-50 
所 示 。 

葡 单 击 “ 选 择 文件 夹 ”按钮 ， 选 择 文件 位 置 ， 
如 图 33-51 所 示 。 图 33-52 “管理 站 点 ”对 话 框 
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06 单 击 “ 完 成 ”按钮 ， 在 “文件 ”面板 中 可 
以 看 到 创建 的 站 点 中 的 文件 , 如 图 33-53 所 示 。 
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图 33-53 “文件 ”面板 


33.4.2 ”创建 二 级 模板 页 面 


创建 的 二 级 模板 页 面 效 果 如 图 33-54 所 
示 ， 具 体操 作 步 又 如 下 : 


ta me 


图 33-54 二 级 模板 页 面 效 果 


加 执行 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 
建文 档 ” 对 话 框 ， 在 对 话 框 中 依次 选择 “ 空 
白 页 ”|“HTML 模板 ”|“ 无 ”选项 ， 如 图 
33-55 所 示 。 

本 单 击 “创建 ”按钮 ， 创 建 空白 模板 文档 , 
如 图 33-56 所 示 。 
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“新 建文 档 ” 对 话 框 


图 33-55 
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图 33-56 创建 空白 模板 文档 


到 执 行 “ 文 件 " 上 | 保存” 命令， 弹出 
Dreamweaver 提示 对 话 框 ， 如 图 33-57 所 示 。 
2 


此 模板 不 合 有 任何 可 编辑 区 域 。 您 想 继续 13? 


| 全 


Dreamweaver 


不 用 警告 我 。O) 
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图 33-57 提示 对 话 框 


吗 单 击 “ 确 定 ” 按 钮 , 弹出 “另存 模板 对话 框 ， 
在 对 话 框 中 的 “另存 为 ”文本 框 中 输入 名 称 ， 
如 图 33-58 所 示 。 
与 下 条 去 | 
| 高 : 52 


| 现存 的 模板 : | (和 有 模板 ) | 取消 


者 述 
EE 


“另存 模板 ”对 话 框 


图 33-58 
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号 单 击 “ 保 存 ” 按 钮 ， 保 存 模 板 文档 ， 将 光 ， 喝 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 执 
标 置 于 页 面 中 , 执行 “修改 ”1“ 页 面 属性 ”命令 ， 行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ” 命令 , 弹出 “ 选 
弹出 “页 面 属性 ”对 话 框 ， 在 对 话 框 中 将 “ 左 。 择 图 像 源 文件 ”对 话 框 ， 在 对 话 框 中 选择 图 
边 距 ”、“ 上 边 距 ”、“ 下 边 距 ”和 “右边 距 ” 像 文件 index_01.gif， 如 图 33-62 所 示 。 


分 别 设 为 0， 如 图 33-59 所 示 。 ee 
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图 33-59 “页 面 属性 ”对 话 框 


丁 单 击 “ 确 定 ” 按 钮 ， 设 置 页 面 属性 ， 将 光 
标 置 于 页 面 中 ,执行 “插入 ”|“ 表 格 ”命令 ， 
弹出 “表格 ”对 话 框 ， 在 对 话 框 中 将 “ 行 数 ” 
设置 为 4、“ 列 ”设置 为 1、“ 表 格 宽度 ” 设 
置 为 1030 像素 ， 如 图 33-60 所 示 。 
CE | 
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图 33-62 “选择 图 像 源 文 件 ” 对 话 框 


到 单 击 “ 确 定 ” 按 钮 ， 插 入 图 像 ， 如 图 33-63 
所 示 。 
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图 33-63 插入 图 像 


.| [CC 本 碳 | 
i 而 将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 执 
图 33- 格 ”对 话 框 
os 行 “ 插 入 ”| “图 像 ” | “图 像 ”命令 ， 插 入 图 
吧 单 击 “ 确 定 ” 按 钮 ， 插 入 表格 ， 此 表格 记 ， 像 ndex_02.gif， 如 图 33-64 所 示 。 
为 表格 1， 如 图 33-61 所 示 。 
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图 33-61 插入 表格 1 图 33-64 插入 图 像 
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面 将 光标 置 于 表格 1 的 第 3 行 单元 格 中 ， 执 


行 “插入 ?| 表格 ”命令 , 插入 1 行 3 允 
此 表格 记 为 表格 2， 如 图 33-65 所 示 。 


GDCISLE 


的 表格 ， 


图 33-65 插入 表格 2 


唱 将 光标 置 于 表格 2 的 第 1 列 单元 格 中 ， 执 


行 “插入 ”| 表格 ”命令 , 插入 6 行 1 列 的 表格 ， 


此 表格 记 为 表格 3， 如 图 33-66 所 示 。 


TS 
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图 33-66 插入 表格 3 
申 将 光标 置 于 表格 3 的 第 1 行 单元 格 中 ， 


打开 “代码 ”视图 ， 输 入 背景 图 像 代 码 


background=../images/xuxian.gif， 如 图 33 


-67 所 示 。 


图 33-67 输入 代码 


早 返 回 “ 设 计 ” 视 图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 3 


3-68 所 示 。 


图 33-68 插入 背景 图 像 


号 将 光标 置 了 


为 表格 4， 如 


FF 背景 图 像 上 , 执行 “插入 ”|“ 表 
格 ” 命 令 ， 插 入 2 行 1 列 的 表格 ， 此 表格 记 
图 33-69 所 示 。 


EE 
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图 33-69 插入 表格 4 


酌 将 光标 置 于 表格 4 的 第 1 行 单元 格 中 ， 执 
行 “插入 ”|“ 图 像 "| “图像 ”命令 , 插入 图 像 ./ 


Images/lan.jpg 


， 如 图 33-70 所 示 。 
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图 33-70 插入 图 像 
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酌 将 光标 置 于 表格 4 的 第 2 行 单元 格 中 ， 执 
行 “插入 ”|“ 表 格 ” 命 令 , 插入 4 行 3 列 的 表格 ， 
此 表格 记 为 表格 5， 如 图 33-71 所 示 。 
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图 33-71 插入 表格 5 


县 将 光标 置 于 表格 5 的 第 1 行 第 1 列 单元 格 
中 ， 执行 “插入 ”|“ 图 像 ”|“ 图 像 ” 命令 ， 
插入 图 像 /images/129.gif， 如 图 33-72 所 示 。 


图 33-72 插入 图 像 


大 将 光标 置 于 表格 $ 的 第 1 行 第 2 列 单元 格 
中 ， 输 入 相应 的 文字 “商铺 ”， 将 文字 “大 
小 ”设置 为 12 像素 ， 将 字体 设置 为 粗 体 ， 如 
图 33-73 所 示 。 


图 33-73 输入 文字 
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到 将 光标 置 于 表格 5 的 第 1 行 第 3 列 单元 格 
中 ， 执 行 “ 插 入 ”| “图 像 ”| “图 像 ”命令 ， 
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图 33-74 插入 图 像 


到 按 步 骤 18-20 的 方法 在 表格 5 的 其 他 单 
元 格 中 插入 相应 的 图 像 ， 并 输入 文字 ， 如 图 
33-75 所 示 。 


图 33-75 输入 其 他 内 容 


到 将 光标 置 于 表格 3 的 其 他 单元 格 中 ， 分 别 


图 33-76 插入 其 他 的 图 像 


本 将 光标 置 于 表格 2 的 第 2 列 单元 格 中 ， 将 
单元 格 的 “ 宽 ” 设 置 为 1， 将 “背景 颜色 ” 设 


置 为 #ffca7b， 如 图 33-77 所 示 。 
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西 将 光标 置 于 表格 1 的 第 4 行 单元 格 中 ， 打 
开 “ 代 码 ” 视 图 ， 在 “代码 ”视图 中 输入 背 
景 图像 代 码 background=../images/b.jjpg， 如 图 
33-80 所 示 。 


图 33-77 设置 单元 格 属性 


现 将 光标 置 于 表格 2 的 第 3 列 单元 格 中 ， 执 
行 “ 插 入 ”|“ 模 板 ”|“ 可 编辑 区 域 ”命令 ， 

弹出 “新 建 可 编辑 区 域 ” 对 话 框 ， 在 对 话 框 
的 “名 称 ” 文 本 框 中 输入 名 称 , 如 图 33-78 所 示 。 


图 33-78 “新 建 可 编辑 区 域 ”对 话 框 
西单 击 “ 确 定 ” 按 钮 ， 插 入 可 编辑 区 域 ， 如 


图 33-79 所 示 。 


aN We me So a BN 


人 


图 33-80 输入 背景 图 像 代码 


于 返回 “设计 ”视图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 33-81 所 示 。 


[3 
[0 
篇 ra 


[3 


图 33-81 插入 背景 图 像 


28 将 光标 置 于 背景 图 像 上 ,执行 “插入 ”|“ 图 
像 ”|“ 图 像 ” 命 令 ， 插 入 图 像 .Jimages/ 
zhuye_16.gif， 如 图 33-82 所 示 。 


图 33-79 插入 可 编辑 区 域 


图 33-82 插入 图 像 
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29 保存 模板 文档 , 预览 效果 , 如 图 33-54 所 示 。 


33.4.3 ”利用 模板 制作 其 他 网 页 


利用 模板 创建 的 网 页 效果 如 图 33-83 所 
示 ， 具 体操 作 步 又 如 下 : 


图 33-83 利用 模板 创建 的 网 页 效果 
加 执行 “文件 ”|“ 新 建 ” 命 令 ， 弹 出 “新 建 
文档 ”对 话 框 ， 依 次 选择 “网 站 模板 ”|“ 站 
点 33.5.3”|“moban” 选 项 ， 如 图 33-84 所 示 。 


] sam 站 


中 
站 shmima 。 测 RH 


BB ase 
[ID 
erertes 
NR ga 
图 33-84 “新 建文 档 ” 对 话 框 


02 单 击 “创建 ”按钮 ， 利 用 模板 创建 文档 ， 
如 图 33-85 所 示 。 

03 执行 “文件 ”|“ 保 存 ” 命 令 ， 弹 出 “另存 
为 ”对 话 框 , 在 “文件 名 ”组 合 框 中 输入 名 称 ， 
如 图 33-86 所 示 。 
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图 33-86 “另存 为 ”对 话 框 


咀 单 击 “ 保 存 ” 按 钮 保存 文档 ， 将 光标 置 
于 可 编辑 区 域 中 , 执行 “插入 ”| “表格 ”命令 ， 
插入 2 行 1 列表 格 ， 此 表格 记 为 表格 1， 如 图 
33-87 所 示 。 


国际 商业 广场 人 -~ 


有 


图 33-87 插入 表格 1 


0 将 光标 置 于 表格 1 的 第 1 行 单元 格 中 ， 执 
行 “插入 ”| 表格 ”命令 , 插入 1 行 4 列 的 表格 ， 
此 表格 记 为 表格 2， 如 图 33-88 所 示 。 


图 33-88 插入 表格 2 
06 将 光标 置 于 表格 2 的 第 1 列 单元 格 中 ， 执 
行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ”命令 ， 插 入 图 
像 images/lanml.jpg， 如 图 33-89 所 示 。 


广 国 际 高 业 启 场 人 


rt 


PO HBr 


oo0 


图 33-89 插入 图 像 


吗 将 光标 置 于 表格 2 的 第 2 列 单元 格 中 ， 打 
开 “ 代 码 ” 视 图 ， 在 “代码 ”视图 中 输入 背 
景 图 像 代码 background=images/lanm2.jpg， 如 
图 33-90 所 示 。 


图 33-90 输入 代码 


08 返回 “设计 ”视图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 33-91 所 示 。 


图 33-91 插入 背景 图 像 


09 将 光标 置 于 背景 图 像 上 ， 输 入 相应 的 文字 ， 
如 图 33-92 所 示 。 


m 


康 庄 国际 商业 广场 


Pow 


图 33-92 输入 文字 


和 0 将 光标 置 于 表格 2 的 第 3 列 单元 格 中 ， 执 
行 “插入 ”|“ 图 像 ”| “图像 ”命令 ， 插 入 图 
像 inages/lanm3.jpg， 如 图 33-93 所 示 。 


图 33-93 插入 图 像 
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面 将 光标 置 于 表格 2 的 第 4 列 单元 格 中 ， 打 
开 “ 代 码 ” 视 图 ， 在 “代码 ”视图 中 输入 背景 


像 代 码 background=images/lanm4.jpg， 如 图 
33-94 所 示 。 


图 33-94 输入 代码 


号 返回 “设计 ”视图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 33-95 所 示 。 


图 33-95 插入 背景 图 像 


司 将 光标 置 于 表格 1 的 第 2 行 单元 格 中 ， 执 
行 “插入 "| 表格 ”命令 , 插入 2 行 1 列 的 表格 ， 
此 表格 记 为 表格 3， 如 图 33-96 所 示 。 


图 33-96 插入 表格 3 
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贾 将 光标 置 于 表格 3 的 第 1 行 单元 格 中 ， 执 
行 “插入 ”|“ 表 格 ”命令 , 插入 3 行 3 列 的 表格 ， 
此 表格 记 为 表格 4， 如 图 33-97 所 示 。 


图 33-97 插入 表格 4 


硕 将 光标 置 于 表格 4 的 第 1 行 第 1 列 单元 格 
中 ， 执 行 “插入 ”|“ 表 格 ” 命 令 ， 插 入 2 行 
1 列 的 表格 ， 此 表格 记 为 表格 S， 如 图 33-98 
所 示 。 


图 33-98 插入 表格 5 


叫 将 光标 置 于 表格 5 的 第 1 行 单元 格 中 ， 打 
开 “ 代 码 ” 视 图 ， 在 “代码 ”视图 中 输入 背 
景 图 像 代码 background=images 人 kk-2.jpg， 如 
33-99 所 示 。 


图 


图 33-99 输入 代码 


嘱 返 回 “ 设 计 ” 视 图 ， 可 以 看 到 插入 的 背景 
图 像 ， 如 图 33-100 所 示 。 


图 33-100 插入 背景 图 像 


中 将 光标 置 于 背景 图 像 上 , 执行 “插入 ”|“ 表 
格 ”命令 ,插入 3 行 1 列 的 表格 ， 此 表格 记 


图 33-101 插入 表格 6 


艳 将 光标 置 于 表格 6 的 第 1 行 单元 格 中 ， 执 
行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ” 命 令 ， 插 入 图 
像 imageskk-1.jpg， 如 图 33-102 所 示 。 


如 将 光标 置 于 表格 6 的 第 2 行 单元 格 中 ， 执 
行 “ 插 入 ”|“ 图 像 ”|“ 图 像 ” 命 令 ， 插 入 图 
像 images/003.jpg， 如 图 33-103 所 示 。 


图 33-103 插入 图 像 


辆 将 光标 置 于 表格 6 的 第 3 行 单元 格 中 ， 执 
行 “ 插 入 ”|“ 图 像 ”| “图像 ” 命令 ， 插入 图 
像 images/k-3.jpg， 如 图 33-104 所 示 。 


图 33-104 插入 图 像 


到 将 光标 置 于 表格 5 的 第 2 行 单元 格 中 ， 输 
入 相应 的 文字 ， 如 图 33-105 所 示 。 


Die A 
om 7 9 HBr 


i 
OH me go 


图 33-102 插入 图 像 


图 33-105 输入 文字 
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23 按 步 骤 15-22 的 方法 在 表格 4 的 其 他 单元 格 中 ， 插 入 相应 的 图 像 ， 并 输入 文字 ， 如 图 33-106 
所 示 。 
4 将 光标 置 于 表格 3 的 第 2 行 单元 格 中 ， 输 入 相应 的 文字 ， 如 图 33-107 所 示 。 


Dw 37 wes sew m5 mW wd S30 ers EW we ~ 


图 33-106 插入 其 他 内 容 图 33-107 输入 文字 


下 保存 利用 模板 创建 的 文档 ， 按 F12 键 ， 在 浏览 器 中 预览 ， 效 果 参 见 图 33-83 所 示 。 
本 章 小 结 


制作 一 个 完整 的 企业 网 站 ， 首 先 考虑 的 是 网 站 的 主要 功能 栏目 、 色 彩 拱 配 、 风 格 及 其 创意 。 
在 设计 综合 性 网 站 时 ， 为 了 减少 工作 时 间 ， 提 高 工作 效率 ， 应 尽量 避免 一 些 重复 性 的 劳动 ， 特 
别 是 要 好 好 掌握 在 本 章 中 介绍 的 模板 的 创建 与 应 用 ， 读 者 在 学 习 本 章 的 过 程 中 应 多 下 些 功夫 ， 
来 掌握 企业 网 站 的 特点 与 制作 。 
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附录 人 ”网 页 设计 考试 模拟 题 


1. 邮件 的 正确 格式 是 : (  ) 

A: maiil to://abc(@abcd.com 

B: mail to:abc@abcd.com 

C: mail to:abc@abcd.com 

D: mailto:abc@abcd.com 

答案 : D 

2. Dreamweaver 中 ， 如 果 要 改变 文字 的 
大 小 ， 可 以 采用 : (  )。 

A: 改变 文字 的 样式 
: 改变 字体 
: 增加 缩 进 

D: 减少 缩 进 

答案 : A 

3. 在 一 个 页 面 中 隐藏 一 个 表格 ， 正 确 的 
做 法 是 ，(  )。 

A: 直接 删除 整个 表格 

B: 单 击 鼠 标 右 键 ， 在 弹出 的 快捷 菜单 
中 选择 “隐藏 表格 ”命令 

C: 在 表格 属性 中 设置 边框 粗细 为 0 

D: 在 单元 格 属性 中 设置 边框 粗细 为 0 

答案 : C 

4. 对 于 一 个 由 左右 两 栏 构成 的 框架 页 面 ， 
它 是 由 (  )。 

A: 一 个 文件 构成 的 
: 两 个 文件 构成 的 
: 三 个 文件 构成 的 
: 四 个 文件 构成 的 

答案 : C 

5. 在 FIP 工 具 中 ， 其 中 HostorURL 中 
要 求 输入 的 是 : (  )。 

A: 网 站 FTP 服务 器 的 地 址 
网 站 的 域名 地 址 
网 站 WWW 服务 器 的 地 址 
: 网 站 远程 登录 服务 器 的 地 址 


B 
C 


已 已 已 


HOn 


答案 : A 

6. 在 Flash 的 工具 箱 中 ， 主 要 包含 了 : 
( a 
A: 常用 的 动画 效果 工具 

B: 声音 工具 

C: 绘图 工具 

D: 效果 工具 

答案 : C 

7. 组 件 (Symbol)〉 是 Flash 中 可 以 重复 
使 用 的 : (  )。 

A: 图 像 

B: 窗口 

C: 面板 

D: 菜单 

答案 : A 

8. 在 Flash 中 ， 要 改变 字体 的 颜色 可 以 
通过 : 和 

A: 工具 箱 中 的 描绘 颜色 来 改变 

B: 工具 箱 中 的 填充 颜色 来 改变 

C: 文本 选项 面板 来 改变 


D: 文本 属性 来 改变 

答案 : B 

9. 在 Flash 中 ， 一 个 按钮 就 是 (  ) 
A: 一 个 图 形 

B: 一 个 组 件 

C: 一 个 动画 

D: 一 段 文本 

答案 : B 


10. 在 使 用 “线条 工具 ”绘制 直线 时 


可 以 按 住 (  ) 键 ， 以 便 绘 制 出 与 水 平方 
向 成 45 度 角 的 直线 。 

A: Alt 

B: Shift 

C: Ctrl 


可 以 在 ( 


D: Windows 功能 键 
答案 : B 
11. 在 使 用 多 边 形 工具 绘制 多 边 形 时 ， 


) 面板 中 设置 多 边 形 的 边 数 等 


参数 。 


某 一 


览 当前 页 面 可 用 ( 


: Fill (填充 ) 面板 

: Info (信息 ) 面板 

: Layers (图 层 ) 面板 

: Option〔 选 项 ) 面板 

答案 : B 

12. 如 果 超 链接 的 对 象 是 在 本 文档 中 的 
个 位 置 上 , 必须 在 相应 的 位 置 上 〈 js 
A: 插入 一 个 书签 

B: 插入 一 段 JavaScript 脚本 

C: 插入 一 个 Web 组 件 

D: 插入 一 个 新 网 页 

答案 : A 

13. 在 Dreamweaver 中 ， 在 浏览 器 中 预 
) 个 快捷 键 。 


(= 


A: Fl12 
B: F8 

C: FS 

D: Ctrl+S 
答案 : A 


14. HTML 文件 中 ， 下 面 (  ) 标记 


中 包含 了 网 页 的 全 部 内 容 。 


A: <Center>...</center> 

B: <pre>...</pre> 

C: <Body>...</Body> 

D: <Br>...</Br> 

答案 : C 

15. URL 又 称 为 : (  )。 
A: 统一 资源 定位 符 

B: 客户 机 

D: 远程 访问 

答案 : A 

16. 设计 网 页 时 ， 网 页 窗口 大 小 一 般 设 


: 640X480 
: 800X600 
: 1024X768 


17. HTML 网 页 可 用 以 下 ( 
制作 。 


) 工具 


A 
B 
C: Dreamweaver 
D: 以 上 均 可 

答案 : D 

18. 在 Dreamweaver 中 ， 若 希望 设计 一 
个 能 被 拖 动 到 任意 位 置 的 图 像 ， 则 应 对 该 图 
像 如 何 设置 ? ( ) 

A: 首先 将 图 像 放 在 一 个 新 图 层 中 ， 再 设 
置 图 层 特性 

B: 直接 插入 图 像 ， 将 属性 设 为 浮动 

C: 直接 插入 图 像 ， 将 属性 设 为 两 端 对 齐 

D: 引入 帧 ， 将 图 像 放 入 帧 中 

答案 : D 

19. 若 将 Dreamweaver 中 的 两 个 横向 相 邻 
的 单元 格 合并 ， 则 两 表格 中 文字 会 : (  ) 。 

A: 文字 合并 

B: 左 单元 格 文字 丢失 

C: 右 单元 格 文字 丢失 

D: 系统 出 错 

答案 : A 

20. 对 Dreamweaver, 下 面 说 法 对 的 是 : 
( 条 志 
A: 可 插入 Flash 按钮 

B: 可 插入 Flash 文本 

C: 可 插入 Flash 的 .Ha 文件 

D: 可 插入 Flash 的 .swf 文件 

答案 : D 

21. 对 一 个 有 两 个 区 域 的 框架 网 页 ， 它 
有 多 少 个 HIML 文件 (  ) 

A: 1 

Br 这 


Ci 3 
D: 4 
答案 : C 
22. Dreamweaver 中 可 设置 的 热点 形状 
为 : 人 ) 。 
A: 方形 
B: 圆 形 
C: 多 边 形 
D: 以 上 都 是 
答案 : D 
23. Flash 导出 的 动画 文件 类 型 为 : 


案 : C 
24. Flash 的 “ 套 索 工具 ”可 以 选择 什么 
样 的 区 域 ? (  ) 


D: 以 上 都 是 

答案 : C 

25. 超 文件 标记 语言 是 一 种 建立 网 页 文 
件 的 语言 ， 是 由 一 系列 的 〈 ) 和 标签 组 
成 的 。 
元 素 
字母 
天 地 
: 代码 
答案 : D 

26. 要 想 设置 在 浏览 器 中 ， 当 鼠标 指针 
移动 到 某 段 文字 上 时 ， 改 变 成 沙漏 形状 ， 那 
么 应 该 〈 和 aa 

A: 在 command 命令 中 ， 选择 
getmorecommands 命令 ， 再 对 这 段 文字 应 用 

B: 在 command 命 令 中 选择 
editcommandlist 命令 ， 再 对 这 段 文字 应 用 


HOPF 


C: 编辑 CSS 样式 表 ， 再 对 该 段 文字 应 用 

D: 在 pageproperties 中 对 这 段 文字 应 用 

答案 : C 

27. HIML 中 的 段落 标志 中 ， 标 注 文件 
子 标题 的 是 : 人 ) 。 

A: <Hn></Hn> 

B: <PRE><PRE> 

C: <p> 

D: <BR> 

答案 : A 

28. 利用 时 间 链 做 动画 效果 ， 如 果 想 要 
一 个 动作 在 页 面 载 入 5 秒 后 启动 ， 并 且 是 每 
秒 15 帧 的 效果 ， 那 么 起 始 关键 帧 应 该 设置 在 
时 间 链 的 ，(  )。 

A: 第 1 帧 

B: 第 60 帧 

C: 第 75 帧 

D: 第 5 帧 

答案 : C 

29. 什么 菜单 可 以 允许 用 户 根据 模板 进 
行 表格 的 分 类 和 排序 ? (  ) 

A: formatlayer 

B: formattable 

C: formattext 

D: formatcell 

答案 : B 

30. 在 CSS 语言 中 下 列 哪 一 项 是 “字体 
大 小 ”的 允许 值 ? ( ) 

A: list-style-position:< 值 > 

B: xx-small 

C: list-style:< 值 > 

D: < 族 科 名 称 > 

答案 : B 

.Bulleseyet 图 标 像 什么 ? ( ) 
汽水 瓶 
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32. 在 CSS 语言 中 ， 下 列 哪 一 项 的 适用 
对 象 是 “内 部 元 素 ”? (  ) 

A: 背景 重复 

B: 背景 附件 

C: 纵向 排列 

D: 背景 位 置 

答案 : C 

33. 分 帧 文档 的 文档 格式 是 : (  ) 

A: HTML 格式 

B: ASP 格式 

C: CSS 格式 

D: TXT 格式 

答案 : A 

34. 下 列 对 CSS 文本 转换 表述 不 正确 的 
一 项 是 : ( 

A: 语法 :text-transform:< 值 > 

B: 允许 值 :nonelcapitalizeluppercasellower 
case 

C: 初始 值 :0 

D: 适用 于 : 所 有 元 素 

答案 : D 

35， 下 列 哪 一 项 是 “多 选 式 选单 ”的 语 
法 A 》 

A: <SELECTMULIIPLE> 

B: <SAMP></SAMP> 

C: <ISINDEXPROMPT=" ***"> 
: <TEXTAREAWRAP=OFFIVIRTUAL| 
PHYSICAL></TEXTAREA> 

答案 : A 

36. 动态 HIML 中 随机 分 解 的 转换 特效 
类 型 是 ? 〈 ) 。 


A: Randomdissolve 


已 


B: Splitverticalin 

C: Splitverticalout 

D: Splithorizontalin 

答案 : A 

37. Dreamweaver 的 图 像 在 Fireworks 中 
可 以 得 到 什么 处 理 ? (  ) 

A: 直接 优化 
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B: 间接 优化 

C: 直接 钝 化 

D: 间接 钝 化 

答案 : A 

38. 禁止 表格 格子 内 的 内 容 自 动 断 行 回 


卷 的 HTML 代码 是 ? ( ) 。 


: <trvalign=?> 
: <tdcolspan=#> 
: <tdrowspan=#> 
: <tdnowrap> 
答案 : D 
39. 动态 HIML 文 档 的 多 媒体 控件 
“Sequencer” 表 示 : 〔 pe 
A: 同时 播放 多 个 声音 文件 
B: 为 子 画 面 和 其 他 可 视 化 对 象 定义 移动 


C: 控制 多 媒体 事件 的 定时 自动 播放 

D: 显示 动画 图 形 对 象 

答案 : A 

40. CSS 分 层 是 利用 什么 标记 构建 的 分 
) 


讽 


41. 在 CSS 语言 中 ， 下 列 哪 一 项 的 适 

用 对 象 不 是 “ 带 有 显示 值 的 目录 项 元 素 ”? 
( ) 

目录 样式 位 置 
: 背景 位 置 
目录 样式 类 型 
目录 样式 图 像 

答案 : B 

42. 在 HIML 语言 中 ， 创 建 一 个 位 于 文 
档 内 部 的 靶 位 的 标记 是 : (  )。 

A: <name="NAME"> 

B: <name="NAME"></name> 

C: <aname="NAME"></a> 


D: <aname="NAME"> 

答案 : C 

43. 在 Dreamweaver 中 ， 如 果 网 页 中 
的 某 幅 图 片 (hgj.gif) 和 该 网 页 的 地 址 从 
“C: mydocument\l23\” 变 为 “D: \123\ 
mydocument\123\”， 在 不 改变 该 网 页 地 址 设 
置 的 情况 下 ， 仍 然 能 正确 地 在 浏览 器 中 浏览 
到 该 图 像 的 地 址 设置 是 : Ym 

A: "C: \mydocument\l23\hgj.gif " 

B: "\mydocument\l23\hgj.gif " 

C: "\123\hgj.gif " 

D: "hgj.gif" 

答案 : D 

44. 下 列 对 CSS“ 值 ”和 “组 合 ” 表 述 
不 正确 的 一 项 是 : Ns 

A: 声明 的 值 是 一 个 属性 接受 的 指定 

B: 为 了 减少 样式 表 的 重复 声明 ， 组 合 的 
选择 符 声明 被 禁止 

C: 文档 中 所 有 的 标题 可 以 通过 组 合 给 出 
相同 的 声明 

D: red 是 属性 颜色 能 接受 的 值 

答案 : B 

45. 在 HIML 的 段落 标签 中 ， 标 注 行 中 
断 的 是 : (  )。 
: <Hn></Hn> 
: <PRE></PRE> 
: <P><br> 
: <BR> 

答案 : D 

46. 在 HIML 文 本 显示 状态 代码 
中 ,<SUP></SUP> 表示 : Ye 

A: 文本 加 注 下 标 线 

B: 文本 加 注 上 标 线 

C: 文本 闪烁 

D: 文本 或 图 片 居 中 

答案 : B 

47. 在 动态 HTML 中 设 定 路 径 移动 时 间 
的 属性 是 : (  )。 


A: Bounce 


> 


器 OU 
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B: Duration 

C: Repeat 

D: Target 

答案 : B 

48. 下 面 CGI 脚本 中 的 通用 格式 和 
content-types 不 是 一 一 对 应 的 是 哪 一 项 : 

( b 

HIML 与 text/html 
: Text 与 text/plain 
: GIF 与 image/gif 
: PEG 与 image/jpeg 

答案 : D 

49. 下 列 对 CSS 内 容 表述 不 正确 的 一 项 
是 : ( 

A: 伪 类 和 伪 元 素 不 应 用 HIML 的 
CLASS 属性 来 指定 

B: 一 般 的 类 不 可 以 与 伪 类 和 伪 元 素 一 起 
使 用 

C: 一 个 已 访问 链接 可 以 定义 为 不 同 颜色 
的 显示 

D: 一 个 已 访问 链接 可 以 定义 为 不 同 字体 
大 小 和 风格 

答案 : B 

50. 用 户 可 以 在 ( 
见 到 canAcceptCommand。 

A: SortTable 


DNmr 


) 命令 的 动作 中 


: FormatTable 
: SetColorScheme 

D: CleanUpHIML 

答案 : C 

51. 创建 一 个 滚动 菜单 的 HTML 代码 是 : 
( 和 

A: <form></form> 

B: <selectmultiplename="NAME"si 


B 
C 


Ze=?></select> 
C: <option> 
D: <selectname="NAME"></select> 
答案 : D 
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52. 下 列 对 CSS 单位 中 百分比 单位 表述 
有 误 的 是 哪 一 项 ? ( ) 

A: 一 个 百分比 值 由 可 选 的 正 号 "十 "或 
负 号 " 一 叶 一 个 数字 + 百 分 号 "%" 

B: 在 一 个 百分比 值 之 中 是 没有 空格 的 

C: 百分比 值 是 相对 于 其 他 数值 ， 不 能 用 
于 定义 每 个 属性 

D: 最 经 常 使 用 的 百分比 值 是 相对 于 元 素 
的 字体 大 小 

答案 : A 

53. 由 于 无 ( 。”) 元 素 的 标准 属性 列表 ， 
因而 可 以 任意 定义 元 数据 。 

A: LINK 

B: BASE 

C: META 

D: TARGET 

答案 ，C 

54. 在 CSS 语言 中 下 列 哪 一 项 是 “目录 
样式 图 像 ”的 语法 ? ( 》 

A: width:< 值 > 

B: height:< 值 > 

C: white-space:< 值 > 

D: list-style-image:< 值 > 

答案 : D 

55. 创建 打字 机 风格 的 字体 的 代码 是 : 
( 于 党 

A: <tt></tt> 


B: <cite></cite> 

C: <em></em> 

D: <fontsize=?></font> 

答案 : A 

56. CGI 脚本 语言 环境 变量 REQUEST_ 
METHOD 的 意义 是 下 列 哪 一 项 ?: (  ) 

A: 对 于 用 POST 递交 的 表单 ,标准 输入 
口 的 字 节 数 

B: POST 或 GET 

C: 值 是 application/x-www-form-urlencoded. 

D: 含有 ident 返回 值 

答案 : B 
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57. 下 列 对 CSS 分 类 属性 中 目录 样式 表 
述 有 误 的 是 哪 一 项 ? 人 ) 

A: 目录 样式 属性 是 目录 样式 类 型 、 目 录 
样式 位 置 和 目录 样式 图 像 属 性 的 略 写 

B: 人 允许 值 :< 目录 样式 类 型 >||< 目录 样 
式 位 置 >||<url> 

C: 适用 于 : 带 有 显示 值 的 目录 项 元 素 

D: 语法 :list-style-position:< 值 > 

答案 : B 

58. 在 CSS 语言 中 下 列 哪 一 项 的 适用 对 
象 是 “所 有 对 象 ”? ( ) 

A: 背景 附件 

B: 文本 排列 

C: 纵向 排列 

D: 文本 缩 进 

答案 : A 

59. 下 列 对 CSS “关联 选 择 符 ” 表 述 不 
正确 的 一 项 是 : 和 

A: 关联 选择 符 只 不 过 是 一 个 用 空格 隔 开 
的 两 个 或 更 多 的 单一 选择 符 组 成 的 字符 串 

B: 选择 符 可 以 指定 一 般 属 性 

C: 它们 的 优先 权 比 单一 的 选择 符 大 

D: 关联 选择 符 也 是 一 类 单一 的 选择 符 

答案 : D 

60. 如 何 将 各 个 所 选 对 象 组 合 起 来 ， 然 
后 将 它们 作为 单个 对 象 处 理 ? 《 ) 

A: 执行 “编辑 ”|“ 组 合 ”命令 

B: 执行 “修改 ” |“ 组合” 命令 

C: 执行 “编辑 ”| 取消 “组 合 ” 命 令 

D: 执行 “修改 ”| 取消“ 组合 ”命令 

答案 : B 

61. 目前 在 Intemet 上 应 用 最 为 广泛 的 服 
务 是 : Ys 
: FTP 服务 
WWW 服务 
Telnet 服务 
: Gopher 服务 
案 : B 
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62. 域名 系统 DNS 的 含义 是 : ( Ns C: Perl 


A: Direct Network System D: ASP 
B: Domain Name Service 答案 : A 
C: Dynamic Network System 68. 在 HIML 中 ， 标 记 的 Size 属性 最 大 
D: Distributed Network Service 取 值 可 以 是 : 时 所 
答案 : B A: 5 
63. 主机 域名 center nbu. edu. cn 由 4 个 B: 6 
子 域 组 成 ,其 中 (  ”) 子 域 代表 国 别 代码 。 Ci 
A: center D: 8 
B: nbu 答案 : C 
C: edu 69. 使 用 嵌入 式 方法 引用 样式 表 应 该 使 
D: cn 用 的 引用 标记 是 : 人 Fs 
答案 : D A: <link> 
64. 当 阅 读 来 自 港澳 台地 区 站 点 的 页 面 B: < object > 
文档 时 ， 应 使 用 的 正确 文本 编码 格式 是 : C: <style> 
《 Ys D: <head> 
A: GB 码 答案 : A 
B: Unicode 码 70. 在 DHTML 中 把 整个 文档 的 各 个 元 
C: BIG5 码 素 作为 对 象 处 理 的 技术 是 : (  )。 
D: HZ 码 A: HIML 
答案 : C B: CSS 
65. 当 标 记 的 TYPE 属性 值 为 ( ” ) 时 ， C: DOM 
代表 一 个 可 选 多 项 的 复 选 框 。 D: Script (脚本 语言 ) 
A: TEXT 答案 : C 
B: PASSWORD 71. 下 面 不 属于 CSS 插入 形式 的 是 : 
C: RADIO ( pa 
D: CHECKBOX A: 索引 式 
答案 : D B: 内 联 式 
66. 创建 打字 机 风格 的 字体 的 代码 是 : C: 嵌入 式 
‘ )。 D: 外 部 式 
A: <tt></tt> 答案 : A 
B: <cite></cite> 72. 在 网 页 中 最 为 常用 的 两 种 图 像 格 式 
C: <em></em> 是 : ( a 
D: <fontsize=?></font> A: JPEG 和 GIF 
答案 : A B: JPEG 和 了 PSD 
67. 在 客户 端 网 页 脚本 语言 中 最 为 通用 C: GIF 和 BMP 
的 是 : (  )。 D: BMP 和 PSD 
A: JavaScript 答案 : A 
B: VB 
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73. 如 果 站 点 服务 器 支持 安全 套 接 层 
(SSL) , 那么 连接 到 安全 站 点 上 的 所 有 URL 
开头 是 : i 

A: HTTP 
B: HTTPS 
Cr SHTIP 
D: SSL 

答案 : B 

74. 在 HIML 中 ， 要 定义 一 个 书签 应 该 
使 用 的 语句 是 : (  )。 

A: <ahref= #object-name >text </a> 

B: <a name= object-name >text </a> 

C: <a target= #object-name >text </a> 

D: <a link= #object-name >text </a> 

答案 : A 

75. 对 远程 服务 器 上 的 文件 进行 维护 时 ， 
通常 采用 的 手段 是 : (  )。 
A: POP3 
B: FIP 
C: SMTP 
D: Gopher 
答案 : B 
76. 下 列 Web 服务 器 上 的 目录 权限 级 别 
最 安全 的 权限 级 别 是 : (  )。 
A: 读 取 
B: 执行 
C: 脚本 
D: 写 入 
答案 : A 
77. XML 描述 的 是 : (  ) 
A: 数据 的 格式 
B: 数据 的 规则 
C: 数据 的 本 身 
D: 数据 的 显示 方式 
答案 : C 
78. Intermet 上 使 用 的 最 重要 的 两 个 协议 
是 : ( 六 

A: TCP 和 Telnet 

B: TCP 和 了 P 


H 
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C: TCP 和 SMTP 

D: IP 和 Telnet 

答案 : B 

79. 下 面 说 法 错误 的 是 : 〔 > 

A: 规划 目录 结构 时 ， 应 该 在 每 个 主 目录 
下 都 建立 独立 的 images 目录 

B: 在 制作 站 点 时 应 突出 主题 色 

C: 人 们 通常 所 说 的 颜色 , 其 实 指 的 就 是 
色相 

D: 为 了 使 站 点 目录 明确 ,应 该 采用 中 文 
目录 

答案 : D 

80. 在 Dreamweaver 中 , 最 常用 的 表单 处 
理 脚本 语言 是 : Ys 

A: C 
: JAVA 
: ASP 

D: JavaScript 

答案 : DD 

81. 在 Dreamweaver 中 , 想 要 使 用 户 在 单 
击 超 链 接 时 , 弹出 一 个 新 的 网 页 窗口 , 需要 在 
超 链接 中 定义 目标 的 属性 为 : ) 


B 
C 


A: parent 
B: _bank 
C: top 
D: _self 
答案 : B 


82. 网 页 制作 技术 不 可 以 实现 由 一 个 文 
件 控 制 一 大 批 网 页 (  )。 

A: CSS 文件 

B: 库 

C: 模板 

D: 层 

答案 : D 

83. 查看 优秀 网 页 的 源 代码 无 法 学 习 : 
( ) 。 
A: 代码 简练 性 
B: 版 面 特色 
C: 网 站 目录 结构 特色 


D: Script 程序 

答案 : C 

84. 在 网 页 制作 过 程 中 ，LOGO 的 标准 
尺寸 为 (  ) Pixels。 
: 468-60 


> 
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85. 客户 机 可 向 服务 器 按 MIME 类 型 发 
送 和 接收 信息 , 客户 机 使 用 ( ” ”) 请 求 方式 
表示 要 求 服务 器 发 送 文 件 头 消息 。 

A: SMTP 

B: GET 

C: HEAD 

D: POST 

答案 : D 

86. 在 色彩 的 RGB 系统 中 ，32 位 十 六 进 
制 数 000000 表示 的 颜色 是 : ys 

A: 黑色 

B: 红色 

C: 黄色 

D: 白色 

答案 ， A 

87. SQL Server“ 连 接 ” 组 中 有 两 种 连接 
认证 方式 , 其 中 在 ( ”) 方式 下 ,需要 客户 
端 应 用 程序 连接 时 提供 登录 时 需要 的 用 户 标 
识 和 密码 。 

A: Windows 身份 验证 

B: SQL Server 身份 验证 

C: 以 超级 用 户 身份 登录 时 

D: 其 他 方式 登录 时 

答案 : B 

88. 网 页 代码 第 一 行 说 明 此 页 是 ( Ys 

HIM 


太 吕 > 
> 
an 
- 
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89. 不 论 是 网 络 的 安全 保密 技术 ,还 是 站 
点 的 安全 技术 , 其 核心 问题 是 ，(  )。 

A: 系统 的 安全 评价 

B: 保护 数据 安全 

C: 是 否 具有 防火 墙 

D: 硬件 结构 的 稳定 

答案 : A 

90. 在 笔触 选项 弹出 窗口 中 如 何 设置 可 
以 得 到 最 硬 边缘 的 笔触 ? (  ) 

A: 把 边缘 柔和 度 滑 块 一 直 拉 到 底 
: 把 边缘 柔和 度 滑 块 一 直 拉 到 顶 
: 把 边缘 宽度 滑 块 一 直 拉 到 底 
: 把 边缘 宽度 滑 块 一 直 拉 到 顶 

答案 : A 

91. 如 何 将 颜色 栏 中 的 颜色 应 用 于 所 选 
矢量 对 象 ? (  ) 

A: 单 击 混 色 器 中 笔触 或 填充 框 旁 边 的 图 
标 ， 将 指针 移动 到 颜色 栏 上 ， 指 针 变 为 滴 管 
形状 ,双击 以 选择 一 种 颜色 

B: 单 击 混 色 器 中 笔触 或 填充 框 旁 边 的 图 
标 ， 将 指针 移动 到 颜色 栏 上 ， 指 针 变 为 滴 管 
形状 ， 按 住 Shift 键 单 击 以 选择 一 种 颜色 

C: 单 击 混 色 器 中 笔触 或 填充 框 旁边 的 图 
标 ， 将 指针 移动 到 颜色 栏 上 ， 指 针 变 为 滴 管 
形状 。 按 住 Alt 键 单 击 以 选择 一 种 颜色 

D: 单 击 混 色 器 中 笔触 或 填充 框 旁边 的 图 
标 ， 将 指针 移动 到 颜色 栏 上 ， 指 针 变 为 滴 管 
形状 ， 单 击 以 选择 一 种 颜色 

答案 : D 

92. 如 何 使 用 “样本 ”面板 对 所 选 对 象 
的 笔触 或 填充 应 用 颜色 ? 《 ) 

A: 单 击 工具 面板 或 “属性 ”面板 中 笔触 
或 填充 颜色 框 旁边 的 图 标 ， 使 之 进入 活动 状 
态 。 在 “样本 ”面板 中 单 击 一 个 颜色 样本 ， 
对 所 选 对 象 的 笔触 或 填充 应 用 颜色 

B: 单 击 工具 面板 或 “属性 ”面板 中 笔触 
或 填充 颜色 框 旁边 的 图 标 ， 使 之 进入 活动 状 
态 。 在 “样本 ”面板 中 双击 一 个 颜色 样本 ， 
对 所 选 对 象 的 笔触 或 填充 应 用 颜色 
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C: 单 击 工具 面板 或 “属性 ”面板 中 笔触 
或 填充 颜色 框 旁边 的 图 标 ， 使 之 进入 活动 状 
态 。 在 “样本 ”面板 右 击 一 个 颜色 样本 ， 对 
所 选 对 象 的 笔触 或 填充 应 用 颜色 

D: 单 击 工具 面板 或 “属性 ”面板 中 笔触 
或 填充 颜色 框 旁边 的 图 标 ， 使 之 进入 活动 状 
态 。 在 “样本 ”面板 上 用 鼠标 将 一 个 颜色 样 
本 拖 动 到 所 选 的 对 象 

答案 : A 

93. Fireworks 的 文字 特性 有 : ) 。 

A: 应 用 到 路 径 对 象 上 的 操作 都 可 以 应 用 
到 文字 对 象 

B: 文字 对 象 转化 为 路 径 并 保留 原来 的 可 
编辑 性 

C: Fireworks 可 以 编辑 GIF 格式 的 文件 

D: 以 上 都 对 

答案 : A 

94. 以 下 关于 路 径 的 描述 ， 错 误 的 是 : 
( Ye 
A: 路 径 只 有 一 个 状态 ， 即 闭合 状态 

B: 路 径 是 矢量 图 像 的 基本 元 素 

C: 路 径 的 长 度 、 形 状 、 颜 色 等 属性 都 可 
以 被 修改 

D: 路 径 至 少 有 两 个 点 : 起 点 和 终点 

答案 : A 

95. 克隆 和 重复 之 间 的 区 别 是 什么 ? 
k > 

A: 制 出 来 的 对 象 完全 相同 , 位 置 也 相同 ， 
重复 复制 出 的 对 象 位 置 有 一 点 错开 

B: 克隆 复制 出 的 对 象 完全 相同 ， 位 置 有 
点 错开 ， 重 复 复 制 出 来 的 对 象 位 置 也 相同 

C: 克隆 可 以 重复 粘贴 ， 其 他 都 相同 

D: 重复 可 以 重复 粘贴 ， 其 他 都 相同 

答案 : A 

96. 在 固定 宽度 文本 块 或 自动 调整 大 小 
文本 块 之 间 切 换 可 以 进行 下 面 哪个 操作 ? 
( ) 

A: 在 文本 块 内 部 双击 

B: 双击 该 文本 块 右上 角 的 圆 或 正方 形 
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C: 拖 动 该 文本 块 右 上 角 的 圆 或 正方 形 

D: 在 文本 块 外 框 上 双击 

答案 : B 

97. 以 下 以 下 哪 种 不 是 “混合 ”面板 上 
的 颜色 模式 ? (  ) 

A: RGB 

B: HSB 

C: LAB 

D: Grayscal 

答案 : C 

98. 如 何 重新 排列 所 选 对 象 的 效果 应 用 
顺序 ? 

A: 将 效果 拖 动 到 “属性 ”面板 “效果 ” 
下 拉 列 表 中 的 所 需 位 置 

B: 在 “属性 ”面板 “效果 ”下 拉 列 表 中 
双击 一 个 效果 打开 编辑 窗口 

C: 在 “属性 ”面板 “效果 ”列表 中 按 住 
Alt 键 拖 动 

D: 在 “属性 ”面板 “效果 ”列表 中 按 住 
鼠标 右键 拖 动 

答案 : A 

99. 下 列 那 一 种 格式 的 图 形 文件 是 
Fireworks 所 不 能 导入 的 ? ( ) 

A: CorelDRAW 8 创建 的 无 压缩 扩展 名 为 
CDR 的 文件 

B: 压缩 的 CDR 文件 

C: Photoshop 创建 的 PSD 格式 的 文件 

D: FreeHand 创建 的 矢量 图 形 文件 


答案 : B 

100. 载 入 一 个 页 面 或 者 图 像 ， 浏 览 器 有 
错误 发 生 时 ， 引 发 〈 ) 事件 。 

A: onError 


B: onMove 
C: onReset 
D: onResize 
答案 : A 
101. 禁止 用 户 调整 一 个 窗 框 大 小 的 
HIML 代 码 是 (  )。 
A: &ltframe resize&egt; 


地 | 3 
©0 Ye 
CO C。 Ke 
附录 A ”网 页 设计 考试 模拟 题 ”人 门 9 O ( 
B: &lt:frame nosize&et; 103. Dreamweaver 中 不 可 以 使 用 哪 种 服 
C: &lt:frame noresize&gt: 务 器 技术 ， 生 成 由 动态 数据 库 支持 的 Web 应 
D: &ltframe notresize&et:; 用 程序 ? ( Wi 
答案 : C A: CFML 
102. 如 果 要 使 一 个 网 站 的 风格 统一 并 且 B: ASPnet 
便于 更 新 ， 在 使 用 CSS 文件 的 时 候 ， 最 好 是 C: Java 
使 用 (  ) 。 D: JSP 
A: 外 部 链接 样式 表 答案 : A 
B: 内 棋 式 样式 表 
C: 局 部 应 用 样式 表 
D: 以 上 3 种 都 一 样 
答案 : A 
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附录 已 、HTML 速 查 表 


1. 文档 基础 
如 表 B-1 所 示 的 标记 用 于 为 HTML 文档 提供 基本 结构 。 
表 B-1 为 HTML 文档 提供 基本 结构 的 标记 


元 素 和 属性 定 义 

<body>...</body> 标记 HTML 文档 体 的 开始 和 结束 
backcround = url 指定 作为 背景 的 图 像 (HTML 3.2+) 
bgcolor = color 指定 背景 色 (color 可 以 是 颜色 名 称 或 十 六 进 制 数 ) (HTML 3.2+) 
text = color 指定 文本 颜色 CHTML 3.2+) 
link = color 指定 页 面 的 链接 颜色 (HTML 3.2+) 
alink = color 指定 页 面 的 活动 链接 颜色 (HTML 3.2+) 
vlink = color 指定 页 面 已 访问 过 的 链接 颜色 (HTML 3.2+) 
leftmargin =n 指定 文档 左边 与 浏览 器 窗口 左边 缘 的 距离 (Microsoft) 
topmargin =n 指定 文档 上 边 与 浏览 器 窗口 上 边缘 的 距离 (Microsoft) 
rightmargin =n 指定 文档 右边 与 浏览 器 窗口 右边 缘 的 距离 (IE 4.0) 
bottommargin =n 指定 文档 下 边 与 浏览 器 窗口 下 边缘 的 距离 (IE 4.0) 
bgproperties = fixed 定 背景 图 像 的 位 置 〈 也 就 是 不 让 图 像 滚动 ) (Microsoft) 
scroll = yes/no 打开 或 关闭 滚动 条 (IE 4.0) 
onload = script 载 入 文档 时 启动 脚本 的 事件 
onunload 一 script 务 载 文档 时 启动 脚本 的 事件 
<head>...</head> 标记 HTML 文档 头 部 的 开始 和 结束 
<html>...</html> 标记 HTML 文档 的 开始 和 结束 
<title>...</title> 指示 HTML 文档 的 标题 (在 头 部 使 用 》 
a 在 HTML 文档 中 加 注释 
<! doctype html info> 定义 文档 所 用 的 dtd (htmlinfo 是 dtd 名 ) 
<meta> 提供 文档 的 元 信息 
http-equiv = name 与 <meta> 文档 中 数据 相关 的 HTTP 文件 头 部 
content = name 与 命名 HTTP 头 部 相关 的 数据 
name = name 文档 的 描述 
url= url 与 元 信息 相 联系 的 UR1 

2. 文本 风格 类 型 


如 表 B-2 所 示 的 标记 用 于 改变 文档 中 文本 的 风格 ， 即 改变 文本 显示 的 样式 。 
表 B-2 改变 文档 中 文本 风格 的 标记 


元 素 定义 


<b>...</b> 使 文本 成 为 黑体 
<big>...</big> 使 文本 成 为 大 字体 (通常 大 一 号 ) (HTML 3.2+) 


附录 B HTML 速 查 表 


续 表 
元 素 定 义 
<basefont> 设置 文档 的 默认 字体 特性 (HTML 3.2+) 
color = color 设置 字体 的 默认 颜色 
<blank .>...</blank> 使 文本 闪烁 (Netscape) 
<font>...</font> 指示 文档 所 用 的 字体 


Size = 了 


根据 值 n 改变 字体 大 小 Cn 可 以 是 1 一 7 的 任 一 数字 ， 也 可 以 是 一 个 用 来 指示 与 基 
本 字体 大 小 的 偏差 的 正 数 或 负数 ) (HTML 3.2+) 


face= fontname 


如 果 本 地 系统 存在 指定 的 字体 ， 则 改变 字体 样式 为 该 字体 HTML 4.0) 


<i>...</> 


使 文本 成 为 斜体 


<marquee>...<marquee> 


behavior = behavior 


插入 滚动 文本 的 滚动 文本 框 (Microsoft) 
文本 滚动 形式 〈scroll、slide 或 alternate) 


bgcolor = color 


滚动 文本 框 的 背景 色 (color 可 以 是 颜色 名 称 或 十 六 进 制 数 ) 


direction = direction 
height=n 
width=n 

hspace =n 

Vspace =n 
loop=n 
scrolldelay = n 
scrollamount =n 
truespeed 
<s>...</s> 

<small> ...</small> 
<sub>... </sub> 
<sup>...</sup> 
<U>.…</u> 


3， 内容 文本 类 型 


文本 滚动 方向 (le 人 ft 或 right) 

以 像素 为 单位 的 滚动 文本 框 高 度 

以 像素 为 单位 的 滚动 文本 框 宽度 

滚动 文本 框 周 围 总 的 水 平 空间 

滚动 文本 框 周围 总 的 垂直 空间 

文本 滚动 次 数 

刷新 闻 隔 〈 以 毫秒 计 ) 

一 次 刷新 滚动 的 文本 数 

用 指定 的 精确 延迟 值 来 滚动 文本 〈IE 4.0) 
为 文本 添加 删除 线 (HTML 3.2+) (Netscape 中 可 用 <strike>...</strike>) 
以 小 字体 显示 文本 HTML 3.2+) 

以 下 标 显示 文本 (HTML 3.2+) 

以 上 标 显示 文本 (HTML 3.2+) 

给 文本 加 上 下 画 线 


如 表 B-3 所 示 用 于 改变 文档 中 文本 的 内 容 样式 ， 即 改变 文本 的 潜在 意义 。 


元 素 
<address>...</address> 


表 B-3 改变 文档 中 文本 内 容 样式 的 标记 
定义 
指示 页 面 的 作者 、 联 系 信息 等 


<cite>...</cite> 


指示 引用 


<code>...</code> 


包含 代码 (来 自 计算 机 程序 》 


<del>...</del> 


datetime = datetime 


指示 文档 以 前 版 本 中 删除 的 文本 (HTML 3.0、HTML4.0) 
修改 的 日 期 时 间 (datetime 采用 ISO 标准 格式 ) (HTML 4.0) 


<dfn>...</dfn> 指示 一 个 定义 

<em>...</em> 强调 文本 

<hn>...</hn> 指出 文档 标题 ，n 为 1 (最 大 标题 ) ~ 6 最 小 标题 ) 之 间 的 整数 
align = alignment 设置 标题 对 齐 方式 〈alignment 为 left、center 或 right) 
<ins>...</ins> 指示 添加 文档 以 前 版 本 中 的 文本 (HTML 3.0、HIML4.0) 
<kbd>...</kbd> 区 分 来 自 计 算 机 的 输入 和 输出 
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<q>.…</q> 


网 页 设计 与 网 站 建设 完全 实战 手册 


指示 来 自 其 他 来 源 的 引用 (HTML 3.0、HTML4.0) 


cite = url 


指示 引用 的 源 文档 (HTML 4.0) 


<samp>...</samp> 


指示 一 个 文字 字符 的 样本 


<strong>...</strong> 


<Var>...</Var> 


4. 文档 空间 


着 重 强调 文本 
指示 一 个 变量 


如 表 B-4 所 示 的 标记 用 于 控制 文档 的 空间 。 


元 素 与 属性 


表 B-4 控制 文档 空间 的 标记 


定义 


<blockquote>...</blockquote> 创建 一 个 引用 块 


<br> 

clear =alignment 
<center>...</center> 
<div>...</div> 

<hr> 

align = alignment 
Size =1 

noshade 

width = n% 

color = color 
<multicol>...</multicol> 


强制 换行 


清除 文本 换行 (alignment 为 left、right、none 或 al1) (HTML 3.2+) 
文本 居中 〈 同 <div align = center>) (HTML 3.2+) 

在 Web 页 面 中 标记 分 割 (HTML 3.2+) 

添加 一 条 水 平 线 

对 齐 方式 为 left、right 或 center (HTML 3.2+) 

指定 线 的 粗细 (HTML 3.2+) 

使 线 变 黑 CHTML 3.2+) 

指定 线 宽 Cn 为 0 ~ 100 的 整数 ) (HTML 3.2+) 

线 的 颜色 (color 可 以 是 颜色 名 称 或 十 六 进 制 数 ) 〈Microsoft) 
创建 多 列 文本 (Netscape 3+) 


cols=n 列 数 

gutter =n 列 间 的 像素 数 

width =n 每 列 的 宽度 

<nobr>...</nobr> 把 文本 不 加 换行 符 地 标记 出 来 《Microsoft/Netscape) 

<p>…<p> 创建 一 个 段 

<pre>...</pre> 指示 预 格式 化 文本 

width =n 以 字符 计 的 文本 宽度 HTML 3.2+) 

spacer 创建 水 平 或 竖 直 间隔 

type = type 使 用 的 空间 类 型 (type 可 以 为 horizontal、vertical 或 block) 
5. 表格 


如 表 B-5 所 示 的 标记 用 于 在 HTML 3.2 以 上 的 页 面 中 创建 表格 。 


表 B-5 用 于 创建 表格 的 标记 


元 素 与 属性 


定义 


<caption>...</caption> 


指定 表格 标题 


align = alignment 


标题 的 对 齐 方式 ，alignment 可 以 为 top 或 bottom (HTML 3.2+) ， 或 者 left 或 right 
(HIML 4.0) 


<col> 


定义 表格 基于 列 的 默认 属性 HTML 4.0) 


valign = alignment 


行 入 口 的 垂直 对 齐 方式 (alignment 可 以 为 ttp、middie、bottom 或 baseline) 
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续 表 


元 素 与 属性 定义 
span=n 组 跨越 的 列 数 
width =n 列 宽度 Cn 是 像素 或 百分比 ) 
<colgroup> 一 组 表格 列 的 容器 (HIML 4.0) 
<table>...</table> 定义 一 个 表格 
border =n 以 指定 粗细 显示 表格 边框 


align = alignment 


表格 的 对 齐 方式 ，alignment 可 以 为 left、center 或 right (HTML 3.2+) ， 或 者 
bleedleft 或 (beeldrightNetscape) 


width=n 


整个 表 的 固定 宽度 (n 是 任意 数字 ， 可 以 为 像素 点 或 百分比 ) 


bgcolor = color 


bordercolor = color 


定义 表格 的 背景 色 (color 可 以 为 颜色 名 称 或 十 六 进 制 数 ) (HTML 4.0) 
定义 表格 边框 的 颜色 (Microsoft) 


bordercolorlight = color 


定义 3D 表格 边框 亮色 部 分 的 颜色 (Microsoft) 


bordercolordark = 
color 


background = url 
cellspacing =n 
cellpadding =n 

cols=n 

frame = frame 
height=n 

mles = rule 

<th>...</th>, <td>...</td> 
width=n 


定义 3D 表格 边框 暗色 部 分 的 颜色 (Microsoft) 


定义 表格 背景 图 像 的 位 置 (Microsoft) 
设置 表格 单元 格 之 间 的 空间 

设置 单元 格 内 容 与 边框 之 间 的 空间 
设置 表格 的 列 数 (HTML 4.0) 


定义 表格 外 边框 的 显示 类 型 (frame 可 以 为 void、above、below、hsdes、lhs、rhs、 
Vsides、box 或 border) (HTML 4.0) 


表格 的 高 度 Cn 可 以 为 像素 或 百分比 ) (Microsoft/Netscape) 


定义 表格 内 边框 的 显示 类 型 (mule 可 以 为 none、groups、rows、cols 或 all) (HTML 
4.0) 


定义 表格 表 头 <th> 或 表格 数据 项 <td> 
以 像素 计 的 单元 格 宽度 〈 仅 HIML 3.2) 


height =n 以 像素 计 的 单元 格 高 度 〈 仅 HTML 3.2) 
<tr> </tr> 在 表格 中 新 开始 一 行 
<tbody></tbody> 定义 表格 体 (Microsoft) 
<thead></thead> 定义 表格 头 部 (Microsoft) 
<tfoot></tfoot> 定义 表格 足 部 (Microsoft) 

6. 列表 


如 表 B-6 所 示 的 标记 用 于 在 文档 中 创建 不 同类 型 的 列表 。 


表 B-6 用 于 创建 不 同类 型 的 列表 的 标记 


元 素 与 属性 定 义 
<ol>...</ol> 创建 一 个 有 序 〈 编 号 ) 列表 
type = type 指定 所 用 的 顺序 类 型 (type 可 以 为 a、i 或 1) (HTML 3.2+) 
start =n 列表 的 起 始 顺 序 (HTML 3.2+) 
<ul>.…</ul> 创建 一 个 无 序 上 列表 
compact 显示 列表 的 压缩 式 版 本 
type=type 指定 所 用 的 类 型 (type 可 以 为 circl、disc 或 square) (HIML 3.2+) 
<d>...</d> 创建 一 个 术语 列表 
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续 表 


元 素 与 属性 定 义 
<menu>...</menu> ”| 创建 一 个 菜单 列表 
compact 显示 列表 的 压缩 式 版 本 
<dir>...</dir> 创建 一 个 目录 列表 
compact 显示 列表 的 压缩 式 版 本 
<dt> 在 术语 表 中 定义 一 个 术语 
<dd> 在 术语 表 中 给 出 定义 
<li> 给 出 一 个 列表 项 (在 <ol>、<ul>、<menu> 或 <dir> 中 ) 
让 二 罗 才 中 罗 二 人 本 及 随后 的 列表 相逢 类 型 (bullet type 可 以 为 circle、disc 或 


type = number type 


指定 顺序 列表 中 列表 入 口 采用 的 顺序 类 型 (number type 可 以 为 a、 i 或 1) (HTML 3.2+) 


Value = 


7，. 链接 


列表 的 起 始 计数 n 为 任意 整数 CHTML 3.2+) 


如 表 B-7 所 示 的 标记 用 于 创建 到 Web 页 面 、FTP 和 Gopher 站 点 ， 以 及 其 他 Internet 资源 


的 链接 。 


元 素 与 属性 
<a>...</a> 
href = url 


name = name 
shape = shape 


coords=1n 

accesskey = character 
tabindex =n 

<base href = url> 


target = target 


表 B-7 用 于 创建 链接 的 标记 
定义 
定义 一 个 链接 
使 用 URL 指示 链接 目标 
指示 文档 一 个 小 节 的 名 字 以 备 将 来 链接 时 使 用 


嵌入 一 个 图 片 中 的 链接 的 形状 〈shape 可 以 为 circle x，y，Tr; rect x, y, 1, h; polygon 
X1，y1，x2，y2，…，xn，yn; 或 者 default) (CHIML3.0，4.0) 


链接 形状 的 坐标 

与 Ctrl 键 联 用 的 键 ， 用 于 快速 切换 到 该 链接 (HIML 4.0) 
链接 的 tabbing 次 序 CHIML 4.0) 

定义 一 个 文档 中 相关 链接 的 基 URL (位 于 文档 头 部 ) 
指定 链接 源 的 目标 窗口 (HIML 4.0) 


<link> 


定义 当前 文档 与 其 他 文档 之 间 关系 


rel 


定义 当前 文档 与 其 他 文档 之 间 的 相关 联 的 类 型 (也 可 用 于 将 文档 链接 到 脚本 或 样式 表 》 
CHTML 4.0) 


TeV 


其 他 文档 与 当前 文档 的 逆向 关联 


href = url 


8. 图 像 


引用 的 URL 


如 表 B-8 所 示 的 标记 用 于 在 页 面 中 操作 图 像 。 


表 B-8 用 于 在 页 面 中 操作 图 像 的 标记 


元 素 和 属性 


定义 


<ime> 


包含 一 幅 内 媒 图 像 


align = alignment 


图 像 的 对 齐 方式 (alignment 可 以 为 ttpp、middle、bottom 、lef 或 right) (HTML 3.2+) 


alt 一 “text” 


图 像 的 文本 描述 


border =n 


以 像素 计 的 图 片 边框 大 小 CHIML 3.2+) 
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附录 B HTML 速 查 表 


续 表 
元 素 和 属性 定 义 
heignt=n 图 像 的 固定 高 度 (HTML 3.2+) 
width=n 图 像 的 固定 宽度 HTML 3.2+) 
hspace =n 水 平 环绕 空间 〈 以 像素 计 ) (HTML 3.2+) 
Vspace =n 垂直 环绕 空间 (以 像素 计 ) (HTML 3.2+) 
ismap 定义 图 像 为 图 像 映射 
src = graphic filename 图 像 文 件 名 


lowsrc = 
graphic fillename 


图 像 低 分 辨 率 版 本 的 文件 名 (Netscape) 


usemap = url 


图 像 的 客户 方 图 像 映射 的 URL (HTML 3.2+) 


dynsrc = Url 显示 视频 剪辑 的 URL (Microsoft) 
loop=n 视频 剪辑 播放 的 次 数 (Microsoft) 


<map>...</map> 


客户 方 图 像 映射 的 链接 集合 (HTML 3.2+) 


name = name 
<area> 

href = url 
nonref 

shape = shape 
alt= “text” 
tabindex =n 


target = target 


9. 表单 


图 像 映射 的 名 字 

客户 方 图 像 映射 中 的 链接 CHTML 3.2+) 

链接 的 目标 

使 图 像 映射 中 该 区 域 处 于 非 活动 状态 

链接 的 形状 类 型 (shape 可 以 为 rect，circ，poly 或 default) 
链接 的 代替 文本 

tabbing 的 次 数 (HTML 4.0) 

链接 的 目标 窗口 (HTML 4.0) 


如 表 B-9 所 示 的 标记 用 于 创建 表单 〈 包 括 不 同类 型 的 输入 ) ， 以 及 指定 在 提交 时 对 表单 结 


果 所 做 的 处 理 。 


元 素 


表 B-9 用 于 表单 的 标记 


定义 


<form>...</form> 


action = url 


定义 一 个 表单 
处 理 表单 结果 的 脚本 的 位 置 CURL) 


method = method 


发 送 表单 输入 的 方法 (method 可 以 为 get 或 post) 


enctype = enctype 


表单 数据 的 编码 类 型 (HTML 3.2+) 


onsubmit = script 


表单 提交 时 启动 脚本 的 事件 HTML 4.0) 


onreset = script 


表单 重 设 时 启动 脚本 的 事件 (HTML 4.0) 


target = target 指定 链接 源 的 目标 窗口 (HTML 4.0) 
<input> 创建 表单 的 输入 域 

type = 定义 表单 的 输入 类 型 ， 如 以 下 两 行 所 列 
checkbox 复 选 框 

fne 允许 用 户 附带 文件 CHIML 3.2+) 


accept = mime type 
hidden 


限制 了 接收 的 文件 范围 (HTML 4.0) 
不 可 见 输 入 


image 


返回 用 户 单 击 图 像 的 位 置信 息 (HIML 3.2+) 
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续 表 
元 沫 定义 
radio 单 选 按钮 
password 密码 
text 单行 文本 输入 
submit 提交 表单 输入 的 按钮 
reset 重 设 表单 输入 的 按钮 
button 表单 上 的 普通 按钮 
name = name 这 个 输入 变量 的 名 字 ， 如 同 在 脚本 中 看 到 的 〈 但 不 在 表单 中 显示 ) 
size=1n 定义 表单 显示 的 文本 大 小 
maxlength =n 定义 输入 条 目的 最 大 长 度 
value = “text” 用 来 初始 化 hidden 和 text 域 的 值 ， 也 用 于 radio 和 checkbox 域 
disabled 使 域 无 效 以 防止 输入 文本 
checked 初始 化 checkbox 或 radio 域 并 使 之 被 选中 
readonly 使 域 只 读 ， 用 于 checkbox、passwdrd、radio 和 text (HTML 4.0) 


SIc = graphic filename 
alt= “text” 

align = “align” 
tabindex =n 

usemap = url 

onfocus = script 
onblur = script 
onselect = script 
onchange = script 
accesskey = character 
<isindex> 

action = Url 


prompt =“text” 


指示 用 于 image、submit 和 reset 的 图 像 文件 名 

图 像 域 的 替代 文本 (HTML 4.0) 

表单 元 素 的 对 齐 方式 align 可 以 为 tp，middle，bottom，left 或 right) 
设置 tabbing 次 序 (HTML 4.0) 

图 像 的 客户 端 图 像 映射 的 URL (HTML 4.0) 

当 某 一 表单 成 为 活动 域 时 启动 脚本 的 事件 (HTML 4.0) 

当 某 一 表单 变 成 非 活动 域 时 启动 脚本 的 事件 (HTML 4.0) 

当 表单 中 某 一 文本 元 素 被 选中 时 启动 脚本 的 事件 (HTML 4.0) 
当 某 一 表单 域 的 值 改变 时 启动 脚本 的 事件 (HTML 4.0) 

与 Ctrl 键 联 用 的 键 ， 用 于 快速 切换 到 该 链接 (IE 4.0) 
定义 可 搜索 的 索引 

指示 所 用 的 网 关 程 序 (Microsoft) 

指示 提示 符 前 显示 的 文本 (HTML 3.2+) 


<option> 指示 <select> 菜单 表单 中 的 一 个 选项 
disabled 使 入 口 无 效 以 防止 被 选中 

selected 初始 化 入 口 使 之 被 选中 

value = value 指示 这 个 条 目 被 选中 后 返回 的 值 
<select>...</select> 创建 一 个 选择 菜单 

name = name 输入 变量 的 名 字 ， 如 脚本 中 所 见 〈 但 不 在 表单 中 显示 ) 
multiple 允许 选择 多 个 菜单 选项 

disabled 使 菜单 无 效 防止 被 选中 

width=n 菜单 的 固定 宽度 Netscape) 
height=n 菜单 的 固定 高 度 (Netscape) 

size=n 菜单 高 度 

tabindex =n 设置 tabbing 次 序 (HTML 4.0) 


<textarea>...</textarea> 


为 表单 创建 多 行文 本 输入 区 域 ( 标 记 之 间 的 所 有 文本 成 为 表单 的 初始 值 》 


name = name 


输入 变量 的 名 字 ， 如 脚本 中 所 见 〈 但 不 在 表单 中 显示 ) 


ITOWS = 了 


文本 区 域 中 的 行 数 
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Ge? 
© ey 
附录 B HTML 速 查 表 


续 表 
元 素 定 义 
cols=n 文本 区 域 中 的 列 数 
disabled 使 表单 无 效 以 防止 输入 
readonly 使 表单 域 只 读 ， 用 于 (checkbox、password、radio 和 text) (HTML4.0) 
tabindex =n 设置 标记 顺序 位 置 (HTML 4.0) 


usemap = url 


图 像 的 客户 方 图 像 映射 的 URL (HIML 4.0) 


wrap = Wrap 


表单 域 中 采用 的 文本 回 绕 类 型 (wrap 可 以 是 off，physical 或 virtual) (Microsoft/ 
Netscape) 


<fieldset>...</fieldset> 


将 表单 中 一 套 域 集合 成 组 (HTML 4.0) 


<legend>...</legend> 


align = align 


指定 表单 的 域 集合 的 说 明 或 标题 (HTML 4.0) 


说 明 的 对 齐 方式 (align 可 以 为 bottom、top、left 或 right (HTML 4.0) ， 或 者 
center( (IE 4.0) 


<button>...</button> 


在 表单 中 创建 按钮 ， 其 标题 使 用 两 标记 之 间 的 文本 (HTML 4.0) 


name = name 
Value = value 
disabled 
<label>...</label> 
for =id 

disabled 


10. 框架 


按钮 的 名 字 ， 用 于 脚本 或 作为 提交 按钮 
按 下 按钮 时 传送 的 值 

防止 按钮 被 按 下 

表单 域 的 标签 (HTML 4.0) 

将 标签 与 属性 值 为 id 的 域 匹配 

使 标签 无 效 


如 表 B-10 所 示 的 标记 用 于 在 文档 中 创建 不 同类 型 的 框架 。 


元 素 与 属性 
<frameset> 
cols=n 
IOWS=1 
frameborder = 0, 1 
frameborder = yes, no 


表 B-10 用 于 框架 的 标记 
定 义 
在 文档 中 定义 框架 集 (HTML 4.0) 
按 列 创建 框架 集中 的 框架 Cn 是 像素 宽度 或 百分比 的 集合 ) 
按 行 创建 框架 集中 的 框架 (n 是 像素 宽度 或 百分比 的 集合 ) 
打开 (1) 或 关闭 (0) 框架 边框 (Microsoft) 
打开 或 关闭 框架 边框 (Netscape) 


border =n 


bordercolor = color 


边框 的 浓度 (Netscape/Microsoft) 
边框 颜色 (color 可 以 是 颜色 名 称 或 十 六 进 制 数 ) (Netscape/ Microsoft) 


framespacing =n 


定义 框架 之 间 的 空间 (Microsoft) 


onload = script 


所 有 框架 载 入 时 启动 脚本 的 事件 


onunload = script 


所 有 框架 卸载 时 启动 脚本 的 事件 


<frame> 定义 一 个 框架 (HTML 4.0) 

align = align 框架 或 环绕 文本 的 对 齐 方式 (align 可 以 为 left center\right\top 或 bottom)(Microsoft) 
marginheight =n 定义 框架 边缘 高 度 〈 以 像素 计 ) 

marginwidth =n 定义 框架 边缘 宽度 〈 以 像素 计 ) 

name = name 定义 框架 的 目标 名 

noresize 固定 框架 大 小 使 用 户 不 能 调节 

scroll = yes, no, auto 打开 或 关闭 滚动 条 

src=url 定义 框架 的 URL 
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网 页 设计 与 网 站 建设 完全 实战 手册 


续 表 
元 素 与 属性 定义 
height=n 框架 的 高 度 (n 为 像素 或 百分比 ) 
width=n 框架 的 宽度 n 为 像素 或 百分比 ) 


<iframe>...</iframe> 


border =n 


定义 浮动 框架 (HTML 4.0) 
边框 宽度 (Microsoft) 


height =n 定义 浮动 框架 的 高 度 
width =n 定义 浮动 框架 的 宽度 
hspace = 框架 的 水 平 边缘 (Microsoft) 
Vspace =n 框架 的 垂直 边缘 (Microsoft) 


<nofrmes>...</noframes> 


11. 多 媒体 


定义 用 于 不 支持 框架 的 浏览 器 的 蔡 代 文本 (HTML 4.0) 


如 表 B-11 所 示 的 标记 用 于 在 Web 页 面 中 添加 Java Applet 和 JavaScript 脚本 ， 以 及 其 他 多 


媒体 元 素 。 


元 素 与 属性 
<applet>...</applet> 
align = align 
code = filename 
codebase = url 
archive = archive 
object = object 


表 B-11 用 于 多 媒体 的 标记 
定 义 
加 入 Java Applet (HTML 3.2+) 


定义 Applet 的 对 齐 方 式 (align 可 以 为 absbottom、absmiddle、baseline 或 texttop) 
(Microsoft/Netscape) 


定义 Applet 的 文件 名 

定义 Applet 的 URL 

用 逗号 分 隔 的 归档 文件 列表 (HTML 4.0) 
序列 化 的 Applet 文档 CHTML 4.0) 


height = mn 定义 Applet 的 高 度 
width = mn 定义 Applet 的 宽度 
hspace =n 定义 Applet 的 水 平 环 绕 空间 
Vspace = 定义 Applet 的 垂直 环绕 空间 
name = name 定义 Applet 的 名 字 以 区 别 于 页 面 上 其 他 的 Applet 
alt = “text” 在 Applet 处 显示 的 替代 文本 
<embed> 加 入 多 媒体 对 象 〔Microsoft/Netscape) 
定义 对 象 的 对 齐 方式 (align 可 以 为 bottom、top、left、right、absbottom、 
ns absmiddle、baseline 或 texttop) 
alt = “text” 在 对 象 处 显示 的 替代 文本 
height =n 定义 对 象 的 高 度 
width =n 定义 对 象 的 宽度 
hspace =n 定义 对 象 的 水 平 环 绕 空间 
Vspace =1 定义 对 象 的 垂直 环绕 空间 
name = name 定义 对 象 名 以 区 别 于 页 面 中 的 其 他 对 象 
src=url 定义 对 象 的 URL 


codebase = url 


定义 对 象 的 基 URL (Microsoft) 


<noembed>...</noembed> 


定义 用 于 不 支持 对 象 嵌 入 的 浏览 器 的 替代 文本 〈MicrosofyNetscape) 


<object>...</object> 


添加 一 个 多 媒体 对 象 (HTML 4.0) 
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o 这 
附录 B HTML 速 查 表 
续 表 
元 素 与 属性 定义 
border =n 定义 对 象 边框 的 宽度 
classid = url 定义 用 于 对 象 控制 的 类 id 
codebase = url 定义 对 象 的 代码 基 URL 
codetype = type 定义 对 象 的 媒体 类 型 
data = Url 定义 对 象 数据 的 位 置 
declare 声明 一 个 对 象 而 不 启用 它 
height=n 定义 对 象 的 高 度 
hspace =n 定义 对 象 水 平 环绕 空间 
name = Url 如 果 对 象 在 表单 中 提交 则 定义 其 名 字 
shapes 指示 对 象 含有 一 定形 状 的 超 链接 
standby =“message” 定义 对 象 载 入 时 显示 的 消息 
type=type 定义 用 于 对 象 数据 的 媒体 类 型 
usemap = url 定义 使 用 的 客户 方 图 像 映射 
Vspace =n 定义 对 象 垂直 环绕 空间 
width = 了 定义 对 象 的 宽度 
tabindex =n 设置 tabbing 次 序 
<param> 定义 传送 给 Java Applet 的 参数 
name = name 定义 变量 名 
value = value 定义 传送 给 Applet 的 值 


valuetype = type 
type= type 
<bgsound> 

src =url 
loop=n 
balance =n 
Volume =n 


<style>...</style> 


指定 如 何 解释 数据 (type 可 以 为 date、ref 或 object) (HTML 4.0) 
定义 媒体 类 型 HTML 4.0) 

添加 背景 音乐 (Microsoft) 

定义 声音 文件 的 URL 

定义 播放 声音 的 次 数 

定义 左右 杨 声 器 的 平衡 (n 为 -10 000 ~ +10 000 的 任 一 整数 ) 
定义 音量 Cn 是 从 -1000 一 0 的 任 一 整数 ) 

添加 一 个 样式 表 (HTML 4.0) 


type = mime type 


样式 表 的 MIME 类 型 


title= “text” 


样式 表 的 参考 信息 


<span>...</span> 


将 样式 信息 应 用 于 部 分 文档 (HTML 4.0) 


<script>...</script> 


添加 一 个 脚本 (HTML 4.0) 


type = mime type 脚本 的 MIME 类 型 
language = laneguage 定义 脚本 的 语言 
src = url 定义 脚本 的 URL 


<noscript>...</noscript> 


定义 用 于 不 支持 脚本 的 浏览 器 的 蔡 代 标记 (HTML 4.0) 
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附录 CC ”ADO 对 象 方法 属性 详解 


1. ADO 对 象 (如 表 C-1 所 示 ) 


表 C-1 ADO 对 象 
对 象 说 明 
Command Command 对 象 定义 了 将 对 数据 源 执行 的 指定 命令 
Connection 代表 打开 的 、 与 数据 源 的 连接 


DataControl (RDS) 


将 数据 查询 Recordset 绑 定 到 一 个 或 多 个 控件 上 《〈 例 如， 文本 框 、 网 格 控件 或 组 
合 框 ) ， 以 便 在 Web 页 上 显示 ADOR.Recordset 数据 


DataFactory (RDS Server) 
DataSpace (RDS) 

Error 

Field 

了 Parameter 


Property 


RecordSet 


实现 对 客户 端 应 用 程序 的 指定 数据 源 进行 读 / 写 数据 访问 的 方法 

创建 客户 端 代理 以 便 自 定义 位 于 中 间 层 的 业务 对 象 

包含 与 单个 操作 〈 涉 及 提供 者 ) 有 关 的 数据 访问 错误 的 详细 信息 

代表 使 用 普通 数据 类 型 的 数据 的 列 

代表 与 基于 参数 化 查询 或 存储 过 程 的 Command 对 象 相关 联 的 参数 或 自 变量 
代表 由 提供 者 定义 的 ADO 对 象 的 动态 特性 


代表 来 自 基本 表 或 命令 执行 结果 的 记录 的 全 集 。 任 何 时 候 ，Recordset 对 象 所 指 的 
当前 记录 均 为 集合 内 的 单个 记录 


2. ADO 集合 (如 表 C-2 所 示 ) 


Errors 
Fields 
Parameters 


Properties 


表 C-2 ADO 集合 
说 明 
包含 为 响应 涉及 提供 者 的 单个 错误 而 创建 的 所 有 Error 对 象 
包含 Recordset 对 象 的 所 有 Field 对 象 
包含 Command 对 象 的 所 有 Parameter 对 象 
包含 指定 对 象 实例 的 所 有 Property 对 象 


3. ADO 方法 〈 如 表 C-3 所 示 ) 


表 C-3 ADO 方法 
方 法 说 明 
AddNew 创建 可 更 新 的 Recordset 对 象 的 新 记录 
Npani 将 对 象 追 加 到 集合 中 。 如 果 集合 是 Fields， 可 以 先 创建 新 的 Field 对 象 ， 然 后 再 
将 其 追加 到 集合 中 
AppendChunk 将 数据 追加 到 大 型 文本 、 二 进 制 数 据 Field 或 Parameter 对 象 


BeginTrans、CommitTrans 
和 RollbackTrans 


按 如 下 方式 管理 Connection 对 象 中 的 事务 进程 : 
BeginTrans 一 一 开始 新 事务 ; 

CommitTrans 一 一 保存 任何 更 改 并 结束 当前 事务 ， 它 也 可 能 启动 新 事务 ; 
RollbackTrans 一 一 取消 当前 事务 中 所 做 的 任何 更 改 并 结束 事务 ， 它 也 可 能 启动 新 事务 


Cancel 取消 执行 挂 起 的 、 异 步 Execute 或 Open 方法 调用 
Cancel (RDS) 取消 当前 运行 的 异步 执行 或 获取 
CancelBatch 取消 挂 起 的 批 更 新 


好 
ce 
o 
人 
附录 C ADO 对 象 方法 属性 详解 
续 表 
方 法 说 明 
CancelUpdate 取消 在 调用 Update 方法 前 对 当前 记录 或 新 记录 所 做 的 任何 更 改 
CancelUpdate (RDS) a Recordset 对 象 关联 的 所 有 挂 起 更 改 ， 从 而 恢复 上 一 次 调用 Refresh 方 
Clear 删除 集合 中 的 所 有 对 象 
Clone 创建 与 现 有 Recordset 对 象 相同 的 复制 Recordset 对 象 。 可 选择 指定 该 副本 为 只 读 
Close 关闭 打开 的 对 象 及 任何 相关 对 象 
CompareBookmarks 比较 两 个 书签 并 返回 它们 相差 值 的 说 明 
ConvertToString 将 Recordset 转换 为 代表 记录 集 数据 的 MIME 字符 串 
CreateObject (RDS) 创建 目标 业务 对 象 的 代理 并 返回 指向 它 的 指针 
CreateParameter 使 用 指定 属性 创建 新 的 Parameter 对 象 
CreateRecordset (RDS) 创建 未 连接 的 空 Recordset 


Delete(ADO Parameters 
Collection) 


Delete(ADO Fields 
Collection) 


Delete(ADO Recordset) 
Execute (ADO Command) 
Execute (ADO Connection) 
Find 

GetChunk 

GetRows 

GetString 

Item 

Move 


MoveFirst、MoveLast、 
MoveNext 和 MovePrevious 
MoveFirst、 MoveLast、 


MoveNext、 MovePrevious 
(RDS) 


从 Parameters 集合 中 删除 对 象 


从 Fields 集合 删除 对 象 

删除 当前 记录 或 记录 组 

执行 在 CommandText 属性 中 指定 的 查询 、SQL 语句 或 存储 过 程 
执行 指定 的 查询 、SQL 语句 、 存 储 过 程 或 特定 提供 者 的 文本 等 内 容 
搜索 Recordset 中 满足 指定 标准 的 记录 

返回 大 型 文本 或 二 进 制 数据 Field 对 象 的 全 部 或 部 分 内 容 

将 Recordset 对 象 的 多 个 记录 恢复 到 数组 中 

将 Recordset 按 字符 串 返 回 

根据 名 称 或 序号 返回 集合 的 特定 成 员 

移动 Recordset 对 象 中 当前 记录 的 位 置 


移动 到 指定 Recordset 对 象 中 的 第 一 个 、 最 后 一 个 、 下 一 个 或 前 一 个 记录 并 使 该 
记录 成 为 当前 记录 
移动 到 显示 的 Recordset 中 的 第 一 个 、 最 后 一 个 、 下 一 个 或 前 一 个 记录 


NextRecordset 清除 当前 Recordset 对 象 并 通过 提前 命令 序列 返回 下 一 个 记录 集 

Open(ADO onnection) 打开 到 数据 源 的 连接 

nailg Le 方法 可 打开 代表 基本 表 、 查 询 结果 或 者 以 前 保存 的 
OpenSchema 从 提供 者 获取 数据 库 模 式 信息 

Query (RDS) 使 用 有 效 的 SQL 查询 字符 串 返 回 Recordset 

Refresh 更 新 集合 中 的 对 象 以 便 反映 来 自 提供 者 的 可 用 对 象 以 及 特定 于 提供 者 的 对 象 
Refresh (RDS) 对 在 Connect 属性 中 指定 的 ODBC 数据 源 进 行 再 查询 并 更 新 查询 结果 
Requery 通过 重新 执行 对 象 所 基于 的 查询 ， 更 新 Recordset 对 象 中 的 数据 

Reset(RDS) 根据 指定 的 排序 和 筛选 属性 对 客户 端 Recordset 执行 排序 或 筛选 操作 

Resync 从 基本 数据 库 刷新 当前 Recordset 对 象 中 的 数据 

Save (ADO Recordset) 将 Recordset 保存 〈 持 久 ) 在 文件 中 


Seek 


搜索 Recordset 的 索引 以 便 快 速 定 位 与 指定 值 相 匹配 的 行 ， 并 将 当前 行 的 位 置 更 
改 为 该 行 
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SubmitChanges (RDS) 人 更 新 Recordset 的 挂 起 更 改 提交 到 在 Connect 属性 中 指定 的 
Supports 确定 指定 的 Recordset 对 象 是 否 支持 特定 类 型 的 功能 
Update 保存 对 Recordset 对 象 的 当前 记录 所 做 的 所 有 更 改 
UpdateBatch 将 所 有 挂 起 的 批 更 新 写 入 磁盘 


4. ADO 事件 (如 表 C-4 所 示 ) 


事 件 


BeginTransComplete`CommitTransComplete | 行 
和 RollbackTransComplete(ConnectionEve 
nb) 方法 


ConnectComplete 和 
Disconnect(Connection Event) 方法 


EndOfRecordset (RecordsetEvent) 方法 
ExecuteComplete (Connection Event) 方法 


FetchComplete (RecordsetEvent) 方法 
FetchProgress (Recordset Event) 方法 


InfoMessage (Connection Event) 方法 
onError (Event) 方法 (RDS) 
onReadyStateChange (Event) 方法 (RDS) 


WillChangeField 和 FieldChangeComplete 
(RecordsetEvent) 方法 


WillChangeRecord 和 RecordChangeComplete 
(RecordsetEvent) 方法 


表 C-4 ADO 事件 
说 明 
以 下 Event 处 理 方法 将 在 Connection 对 象 的 关联 操作 执行 完成 后 进 
行 调用 ; 


BeginTransComplete 在 BeginTrans 操作 后 调用 ; 
CommitTransComplete 在 CommitTrans 操作 后 调用 ; 
RollbackTransComplete 在 RollbackTrans 操作 后 调用 


在 连接 开始 后 调用 ConnectComplete 方法 ; 
在 连接 结束 后 调用 Disconnect 方法 


当 试 图 移动 到 超过 Recordset 末尾 行 时 ， 调 用 EndOfRecordset 方法 
命令 执行 完成 之 后 ， 调 用 ExecuteComplete 方法 


当 在 长 异步 操作 中 所 有 记录 已 经 被 恢复 (获取) 到 Recordset 之 后 ， 
调用 FetchComplete 方法 


在 长 异步 操作 期 间 定期 调用 FetchProgress 方法 ， 
少 行 已 经 被 恢复 〈 获 取 ) 到 Recordset 中 


在 ConnectionEvent 操作 期 间 一 旦 出 现 警告 ， 
方法 


以 便 报告 当前 有 多 


则 调用 InfoMessage 


在 操作 期 间 一 旦 发 生 错 误 ， 则 调用 onError 方法 

一 旦 ReadyState 属性 的 值 发 生 更 改 ， 则 调用 该 方法 

在 挂 起 操作 更 改 Recordset 中 一 个 或 多 个 Field 对 象 的 值 之 前 ， 则 调 
用 WillChangeField 方法 ; 

在 挂 起 操作 更 改 一 个 或 多 个 Field 对 象 的 值 之 后 ， 则 调用 
FieldChangeComplete 方法 

在 Recordset 中 一 个 或 多 个 记录 ( 行 ) 发 生 更 改 之 前 ， 将 调用 
WillChangeRecord 方法 ; 

在 一 个 或 多 个 记录 发 生 更 改 之 后 ， 将 调用 RecordChangeComplete 
方法 


WillChangeRecordset 和 RecordsetChange 
Complete (RecordsetEvent) 方法 


在 挂 起 操作 更 改 Recordset 之 前 调用 WillChangeRecordset 方法 ; 
在 Recordset 已 经 更 改 之 后 ， 将 调用 RecordsetChangeComplete 方法 


WillConnect (ConnectionEvent) 方法 


WillExecute (ConnectionEvent) 方法 


在 连接 开始 之 前 调用 WillConnect 方法 。 在 挂 起 连接 中 使 用 的 参数 
作为 输入 参数 提供 ， 并 可 以 在 方法 返回 之 前 更 改 。 该 方法 可 以 返回 
取消 挂 起 连接 的 请 求 


WillExecute 方法 在 对 该 连接 执行 挂 起 命令 之 前 调用 ， 使 用 户 能 够 检 
查 和 修改 挂 起 执行 的 参数 。 该 方法 可 以 返回 取消 挂 起 连接 的 请 求 


WillMove 和 MoveComplete (RecordsetEvent) 
方法 
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在 挂 起 操作 更 改 Recordset 中 的 当前 位 置 之 前 ， 调 用 WillIMove 方法 。 
Recordset 中 的 当前 位 置 发 生 更 改 之 后 ， 调 用 MoveComplete 方法 


Po 
OY (© 
附录 C ADO 对 象 方法 属性 详解 


5. ADO 属性 〈 如 表 C-5 所 示 ) 


属 性 


表 C-5 ADO 属性 
说 明 


AbsolutePage 


指定 当前 记录 所 在 的 页 


AbsolutePosition 


指定 Recordset 对 象 当 前 记录 的 序号 位 置 


ActiveCommand 


指示 创建 关联 的 Recordset 对 象 的 Command 对 象 


ActiveConnection 


指示 指定 的 Command 或 Recordset 对 象 当前 所 属 的 Connection 对 象 


ActualSize 指示 字段 的 值 的 实际 长 度 

Attributes 指示 对 象 的 一 项 或 多 项 特性 

BOF 和 EOF BOF 指示 当前 记录 位 置 位 于 Recordset 对 象 的 第 一 个 记录 之 前 ; 
EOF 指示 当前 记录 位 置 位 于 Recordset 对 象 的 最 后 一 个 记录 之 后 

ola 返回 唯一 标识 Recordset 对 象 中 当前 记录 的 书签 ， 或 者 将 Recordset 对 象 的 当前 记 
录 设 置 为 由 有 效 书签 所 标识 的 记录 

CacheSize 指示 缓存 在 本 地 内 存 中 的 Recordset 对 象 的 记录 数 

CommandText 包含 要 根据 提供 者 发 送 的 命令 文本 

CommandTimeout 指示 在 终止 尝试 和 产生 错误 之 前 执行 命令 期 间 需 等 待 的 时 间 

CommandType 指示 Command 对 象 的 类 型 

Connect 设置 或 返回 对 其 运行 查询 和 更 新 操作 的 数据 库 名 称 

ConnectionString 包含 用 于 建立 连接 数据 源 的 信息 

ConnectionTimeout 指示 在 终止 尝试 和 产生 错误 前 建立 连接 期 间 所 等 待 的 时 间 

Count 指示 集合 中 对 象 的 数目 


CursorLocation 


设置 或 返回 游标 服 置 务 的 位 


CursorType 指示 在 Recordset 对 象 中 使 用 的 游标 类 型 

DataMember 指定 要 从 DataSource 属性 所 引用 的 对 象 中 检索 的 数据 成 员 的 名 称 

DataSource 指定 所 包含 的 数据 将 被 表示 为 Recordset 对 象 的 对 象 

DefaultDatabase 指示 Connection 对 象 的 默认 数据 库 

DefinedSize 指示 Field 对 象 所 定义 的 大 小 

Description 描述 Error 对 象 

liesn 指示 Parameter 表示 的 是 输入 参数 、 输 出 参数 ,还 是 既是 输出 参数 又 是 输入 参数 ， 
或 该 参数 是 否 为 存储 过 程 返回 的 值 

EditMode 指示 当前 记录 的 编辑 状态 

ExecuteOptions (RDS) 指示 是 否 启用 异步 执行 

FetchOptions 设置 或 返回 异步 获取 的 类 型 

Filter 指示 Recordset 的 数据 筛选 条 件 

FilterColumn (RDS) 设置 或 返回 计算 筛选 条 件 的 列 

FilterCriterion (RDS) 设置 或 返回 在 筛选 值 中 使 用 的 计算 操作 符 

FilterValue (RDS) 设置 或 返回 用 于 筛选 记录 的 值 
设置 或 返回 包含 扩展 RDSServerDataFactory 功能 的 服务 器 端 自 定 义 程 序 〈 处 理 程 

Handler (RDS) 


序 ) 的 名 称 的 字符 串 ， 以 及 处 理 程序 所 用 的 任何 参数 ， 它 们 均 由 逗号 〈"") 分 隔 


HelpContext 和 HelpFile 


指示 与 Eror 对 象 关联 的 帮助 文件 和 主题 ; 
HelpContextID 一 一 返回 帮助 文件 中 主题 的 、 按 长 整 型 值 返回 的 上 下 文 ID; 
HelpFile 一 一 返回 字符 串 ， 用 于 计算 帮助 文件 的 完整 分 解 路 径 


Index 指示 对 Recordset 对 象 当前 生效 的 索引 的 名 称 
InternetTimeout (RDS) 指示 请 求 超时 前 将 等 待 的 毫秒 数 
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续 表 
属 性 说 明 
IsolationLevel 指示 Connection 对 象 的 隔离 级 别 
LockType 指示 编辑 过 程 中 对 记录 使 用 的 锁定 类 型 
MarshalOptions 指示 要 被 调度 返回 服务 器 的 记录 
MaxRecords 指示 通过 查询 返回 Recordset 的 记录 的 最 大 数目 
Mode 指示 用 于 更 改 Connection 中 数据 的 可 用 权限 
Name 指示 对 象 的 名 称 
NativeError 指示 针对 给 定 Error 对 象 的 特定 提供 者 的 错误 代码 
Number 指示 用 于 唯一 标识 Error 对 象 的 数字 
NumericScale 指示 Parameter 或 Field 对 象 中 数字 值 的 范围 
Optimize 指示 是 否 应 该 在 该 字段 上 创建 索引 
OriginalValue 指示 发 生 任 何 更 改 前 已 在 记录 中 存在 的 Field 的 值 
PageCount 指示 Recordset 对 象 包含 的 数据 页 数 
PageSize 指示 Recordset 中 一 页 所 包含 的 记录 数 
Precision 指示 在 Parameter 对 象 中 数字 值 或 数字 Field 对 象 的 精度 
Prepared 指示 执行 前 是 否 保存 命令 的 编译 版 本 
Provider 指示 Connection 对 象 提供 者 的 名 称 
RecordCount 指示 Recordset 对 象 中 记录 的 当前 数目 


RecordsetandSourceRecords 
et(RDS) 


指示 从 自 定义 业务 对 象 中 返回 的 ADOR.Recordset 对 象 


ReadyState(RDS) 在 RDS.DataControl 对 象 获取 数据 到 它 的 Recordset 对 象 中 时 反映 其 进度 
Server (RDS) 设置 或 返回 Internet Information Server (IIS) 名 称 和 通信 协议 
Size 指示 Parameter 对 象 的 最 大 大 小 〈 按 字 节 或 字符 ) 
gs 指定 一 个 或 多 个 Recordset 以 之 排序 的 字段 名 ， 并 指定 按 升 序 还 是 降序 对 字段 进 
en 行 排序 
SortColulmn (RDS) 设置 或 返回 记录 以 之 排序 的 列 
SortDirection (RDS) 设置 或 返回 用 于 指示 排序 顺序 是 升序 还 是 降序 的 布尔 型 值 
Source (ADO Error) 指示 产生 错误 的 原始 对 象 或 应 用 程序 的 名 称 
Source (ADO Recordset) edt 对 象 (Command 对 象 、SQL 语句 、 表 的 名 称 或 存储 过 程 ) 中 数据 
SQL (RDS) 设置 或 返回 用 于 检索 Recordset 的 查询 字符 串 
SQLState 指示 给 定 Error 对 象 的 SQL 状态 
St 对 所 有 可 应 用 对 和 象 ， 说 明 其 对 象 状态 是 打开 或 是 关闭 。 
we 对 执行 异步 方法 的 Recordset 对 象 ， 说 明 当前 的 对 象 状 态 是 连接 、 执 行 或 是 获取 
Status 指示 有 关 批 更 新 或 其 他 大 量 操作 的 当前 记录 的 状态 
绿 9 ， 指 示 当 父 行 信 时 ， 对 记录 ( 即 “ 
StayInSync 人 对 象 中 ， 指 示 当 父 行 位 置 更 改 时 ， 对 基本 子 记 录 〈 即 “ 子 集 ”) 
Type 指示 Parameter、Field 或 Property 对 象 的 操作 类 型 或 数据 类 型 
UnderlyingValue 指示 数据 库 中 Field 对 象 的 当前 值 
Value 指示 赋 给 Field、Parameter 或 Property 对 象 的 值 
Version 指示 ADO 版 本 号 
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1. ADOX 集合 (如 表 D-1 所 示 ) 


表 D-1 ADOX 集合 


集合 说 阴 
Columns 包含 表 、 索 引 或 关键 字 的 所 有 Column 对 象 
Groups 包含 目录 或 用 户 的 所 有 存储 Group 对 象 
Indexes 包含 表 的 所 有 Index 对 象 
Keys 包含 表 的 所 有 Key 对 象 
Procedures 包含 目录 的 所 有 Procedure 对 象 
Tables 包含 目录 的 所 有 Table 对 象 
Users 包含 目录 或 组 的 所 有 存储 User 对 象 
Views 包含 目录 的 所 有 View 对 象 


2. ADOX 方 法 (如 表 D-2 所 示 ) 


方 法 


将 新 的 Column 对 象 添加 到 Columns 集合 


Append (Columns) 
Append (Groups) 

Append (Indexes) 

Append (Keys) 


将 新 的 Index 对 象 添加 到 Indexes 集合 


将 新 的 Procedure 对 象 添加 到 Procedures 集合 
将 新 的 Table 对 象 添 加 到 Tables 集合 


Append (Procedures) 
Append (Tables) 
Append (Users) 


将 新 的 View 对 象 添加 到 Views 集合 


Append (Views) 


表 D-2 ADOX 方法 
说 明 


将 新 的 Group 对 象 添加 到 Groups 集合 


将 新 的 Key 对 象 添加 到 Keys 集合 


将 新 的 User 对 象 添加 到 Users 集合 


ChangePassword 更 改 用 户 账号 的 密码 

Create 创建 新 的 目录 

Delete 删除 集合 中 的 对 象 

GetObjectOwner 返回 目录 中 对 象 的 拥有 者 

GetPermissions 获得 对 象 上 组 或 用 户 的 权限 

Item 按 名 称 或 序号 返回 集合 的 指定 成 员 

Refresh 更 新 集合 中 的 对 象 ， 以 反映 针对 提供 者 可 用 的 和 指定 的 对 象 
SetObjectOwner 指定 目录 中 对 象 的 拥有 者 


SetPermissions 


设置 对 象 上 组 或 用 户 的 权限 
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3. ADOX 对 象 
表 D-3 ADOX 对 象 
对 象 说 明 
Catalog 包含 描述 数据 源 模式 目录 的 集合 
Column 表示 表 、 索 引 或 关键 字 的 列 
Group 表示 在 安全 数据 库 内 有 访问 权限 的 组 账号 
Index 表示 数据 库 表 中 的 索引 
Key 表示 数据 库 表 中 的 主 关键 字 、 外 部 关键 字 或 唯一 关键 字 
Procedure 表示 存储 的 过 程 
Table 表示 数据 库 表 ， 包 括 列 、 索 引 和 关键 字 
User 表示 在 安全 数据 库 内 具有 访问 权限 的 用 户 账号 
View 表示 记录 或 虚拟 表 的 过 滤 集 


4. ADOX 属性 (如 表 D-4 所 示 ) 
表 D-4 ADOX 属性 


属 性 说 明 
ActiveConnection 指示 目录 所 属 的 ADO Connection 对 象 
Attributes 描述 列 特性 
Clustered 指示 索引 是 否 被 分 簇 
Command 指定 可 用 于 创建 或 执行 过 程 的 ADO Command 对 象 
Count 指示 集合 中 的 对 象 数量 
DateCreated 指示 创建 对 象 的 日 期 
DateModified 指示 上 一 次 更 改 对 象 的 日 期 
DefinedSize 指示 列 的 规定 最 大 大 小 
DeleteRule 主 关 键 字 被 删除 时 将 执行 的 操作 
IndexNulls 指示 在 索引 字段 中 有 Null 值 的 记录 是 否 有 索引 项 
Name 指示 对 象 的 名 称 
NumericScale 指示 列 中 数值 的 范围 
ParentCatalog 指定 表 或 列 的 父 目 录 以 便 访 问 特 定 提供 者 的 属性 
Precision 指示 列 中 数据 值 的 最 高 精度 
PrimaryKey 指示 索引 是 否 代 表 表 的 主 关键 字 
RelatedColumn 指示 相关 表 中 相关 列 的 名 称 〔 仅 关键 字 列 》 
RelatedTable 指示 相关 表 的 名 称 
SortOrder 指示 列 的 排序 顺序 〈 仅 索引 列 》 
Type 〈 列 ) 指示 列 的 数据 类 型 
Type 〈 关 键 字 ) 指示 关键 字 的 数据 类 型 
Type (〈 表 ) 指示 表 的 类 型 
Unique 指示 索引 关键 字 是 否 必须 是 唯一 的 
UpdateRule 指示 主 关键 字 被 更 新 时 会 执行 的 操作 
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附录 D 
5. ADO 对 象 
表 附 录 D-5 
对 象 说 明 
Command Command 对 象 定义 了 将 对 数据 源 执行 的 指定 命令 。 
Connection 代表 打开 的 、 与 数据 源 的 连接 。 
将 数据 查询 Recordset 绑 定 到 一 个 或 多 个 控件 上 《例如 ， 文 本 框 、 网 格 控件 或 组 
DataControl (RDS) 合 框 ) ， 以 便 在 Web 页 上 显示 ADOR_Recordset 数据 。 
DataFactory (RDS ServeD ”| 实现 对 客户 端 应 用 程序 的 指定 数据 源 进行 读 / 写 数据 访问 的 方法 。 
DataSpace (RDS) 创建 客户 端 代理 以 便 自 定义 位 于 中 间 层 的 业务 对 象 。 
Error 包含 与 单个 操作 (涉及 提供 者 ) 有 关 的 数据 访问 错误 的 详细 信息 。 
Field 代表 使 用 普通 数据 类 型 的 数据 的 列 。 
Parameter 代表 与 基于 参数 化 查询 或 存储 过 程 的 Command 对 象 相关 联 的 参数 或 自 变量 。 
Property 代表 由 提供 者 定义 的 ADO 对 象 的 动态 特性 。 
ee 代表 来 自 基本 表 或 命令 执行 结果 的 记录 的 全 集 。 任 何 时 候 ，Recordset 对 象 所 指 
人 的 当前 记录 均 为 集合 内 的 单个 记录 。 
6. ADO 集合 
表 附 录 D-6 
集合 说 明 
Errors 包含 为 响应 涉及 提供 者 的 单个 错误 而 创建 的 所 有 Error 对 象 。 
Fields 包含 Recordset 对 象 的 所 有 Field 对 象 。 
Parameters 包含 Command 对 象 的 所 有 Parameter 对 象 。 
Properties 包含 指定 对 象 实例 的 所 有 Property 对 象 。 
7. ADO 方法 
表 附 录 D-7 
方法 说 明 
AddNew 创建 可 更 新 的 Recordset 对 象 的 新 记录 。 
将 对 象 追加 到 集合 中 。 如 果 集 合 是 Fields， 可 以 先 创建 新 的 Field 对 象 然后 再 将 
A 其 追加 到 集合 中 。 
AppendChunk 将 数据 追加 到 大 型 文本 、 二 进 制 数 据 Field 或 Parameter 对 象 。 


BeginTrans、CommitTrans 和 
RollbackTrans 


按 如 下 方式 管理 Connection 对 象 中 的 事务 进程 : 
BeginTrans- 开始 新 事务 。 

CommitTrans- 保存 任何 更 改 并 结束 当前 事务 。 它 也 可 能 启动 新 事务 。 
RollbackTrans- 取消 当前 事务 中 所 作 的 任何 更 改 并 结束 事务 。 它 也 可 能 启动 新 
事务 。 


Cancel 


取消 执行 挂 起 的 、 异 步 Execute 或 Open 方法 调用 。 


Cancel (RDS) 取消 当前 运行 的 异步 执行 或 获取 。 

CancelBatch 取消 挂 起 的 批 更 新 。 

CancelUpdate 取消 在 调用 Update 方法 前 对 当前 记录 或 新 记录 所 作 的 任何 更 改 。 

CancelUpdate (RDS) ee 对 象 关联 的 所 有 挂 起 更 改 ， 从 而 恢复 上 一 次 调用 Refresh 
Clear 删除 集合 中 的 所 有 对 象 。 
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续 表 


方法 说 明 
ie Se Recordset 对 象 相同 的 复制 Recordset 对 象 。 可 选择 指定 该 副本 为 只 
Close 关闭 打开 的 对 象 及 任何 相关 对 象 。 
CompareBookmarks 比较 两 个 书签 并 返回 它们 相差 值 的 说 明 。 
ConvertToString 将 Recordset 转换 为 代表 记录 集 数据 的 MIME 字符 串 。 
CreateObject (RDS) 创建 目标 业务 对 象 的 代理 并 返回 指向 它 的 指针 。 
CreateParameter 使 用 指定 属性 创建 新 的 Parameter 对 象 。 
CreateRecordset (RDS) 创建 未 连接 的 空 Recordset。 
Be Parameters 从 Parameters 集合 中 删除 对 象 。 
Delete(ADO Fields Collection) | 从 Fields 集合 删除 对 象 
Delete(ADO Recordset) 删除 当前 记录 或 记录 组 。 
Execute (ADO Command) 执行 在 CommandText 属性 中 指定 的 查询 、SQL 语句 或 存储 过 程 。 


Execute (ADO Connection) 
Find 

GetChunk 

GetRows 

GetString 

Item 

Move 


MoveFirst、 MoveLast、 
MoveNext 和 MovePrevious 
MoveFirst、 MoveLast、 


MoveNext、 MovePrevious 
(RDS) 


执行 指定 的 查询 、SQL 语句 、 存 储 过 程 或 特定 提供 者 的 文本 等 内 容 。 
搜索 Recordset 中 满足 指定 标准 的 记录 。 

返回 大 型 文本 或 二 进 制 数据 Field 对 象 的 全 部 或 部 分 内 容 。 

将 Recordset 对 象 的 多 个 记录 恢复 到 数组 中 。 

将 Recordset 按 字 符 串 返回 。 

根据 名 称 或 序号 返回 集合 的 特定 成 员 。 

移动 Recordset 对 象 中 当前 记录 的 位 置 。 


移动 到 指定 Recordset 对 象 中 的 第 一 个 、 最 后 一 个 、 下 一 个 或 前 一 个 记录 并 使 
该 记录 成 为 当前 记录 。 


移动 到 显示 的 Recordset 中 的 第 一 个 、 最 后 一 个 、 下 一 个 或 前 一 个 记录 。 


NextRecordset 清除 当前 Recordset 对 象 并 通过 提前 命令 序列 返回 下 一 个 记录 和 集 。 

Open(ADO Connection) 打开 到 数据 源 的 连接 。 

Open (ADO Recordset) 打开 游标 。 

OpenSchema 从 提供 者 获取 数据 库 模 式 信息 。 

Query (RDS) 使 用 有 效 的 SQL 查询 字符 串 返回 Recordset。 

Refresh 更 新 集合 中 的 对 象 以 便 反映 来 自 提供 者 的 可 用 对 象 以 及 特定 于 提供 者 的 对 象 。 

Refresh (RDS) 对 在 Connect 属性 中 指定 的 ODBC 数据 源 进 行 再 查询 并 更 新 查询 结果 。 

Requery 通过 重新 执行 对 象 所 基于 的 查询 ， 更 新 Recordset 对 象 中 的 数据 。 

Reset(RDS) 根据 指定 的 排序 和 筛选 属性 对 客户 端 Recordset 执行 排序 或 筛选 操作 。 

Resync 从 基本 数据 库 刷 新 当前 Recordset 对 象 中 的 数据 。 

Save (ADO Recordset) 将 Recordset 保存 (持久 ) 在 文件 中 。 

Seek 搜索 Recordset 的 索引 以 便 快 速 定位 与 指定 值 相 匹 配 的 行 ， 并 将 当前 行 的 位 置 
更 改 为 该 行 。 

SubmitChanges (RDS) es Si 更 新 Recordset 的 挂 起 更 改 提 交 到 在 Connect 属性 中 指定 的 

Supports 确定 指定 的 Recordset 对 象 是 否 支 持 特定 类 型 的 功能 。 

Update 保存 对 Recordset 对 象 的 当前 记录 所 做 的 所 有 更 改 。 

UpdateBatch 将 所 有 挂 起 的 批 更 新 写 入 磁盘 。 
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8. ADO 事件 
表 附 录 D-8 
事件 说 明 


以 下 Event 处 理 方法 将 在 Connection 对 象 的 关联 操作 执行 完成 后 进 
BeginTransComplete、CommitTrans | 行 调用 。 
Complete 和 RollbackTransComplete(Conne | BeginTransComplete 在 BeginTrans 操作 后 调用 。 
ctionEvent) 方法 CommitTransComplete 在 CommitTrans 操作 后 调用 。 
RollbackTransComplete 在 RollbackTrans 操作 后 调用 。 


ConnectComplete 和 Disconnect(Connection | 在 连接 开始 后 调用 ConnectComplete 方法 。 
Event) 方法 在 连接 结束 后 调用 Disconnect 方法 。 


EndOfRecordset (RecordsetEvent) 方法 当 试 图 移动 到 超过 Recordset 末尾 行 时 ， 调 用 EndOfRecordset 方法 。 


ExecuteComplete (Connection Event) 方法 “| 命令 执行 完成 之 后 ， 调 用 ExecuteComplete 方法 。 


当 在 长 异步 操作 中 所 有 记录 已 经 被 恢复 (获取 ) 到 Recordset 之 后 ， 
调用 FetchComplete 方法 。 


FetchProgress (Recordset Event) 方法 ee a ed 和 网 ee Rs ， 以 便 报告 当前 有 


在 ConnectionEvent 操作 期 间 一 旦 出 现 警告 ， 则 调用 InfoMessage 
方 ; 


FetchComplete (RecordsetEvent) 方法 


InfoMessage (Connection Event) 方法 


onError (Event) 方法 (RDS) 在 操作 期 间 一 旦 发 生 错 误 ， 则 调用 onError 方法 。 
onReadyStateChange (Event) 方法 (RDS) ”| 一 旦 ReadyState 属性 的 值 发 生 更 改 ， 则 调用 该 方法 。 
在 挂 起 操作 更 改 Recordset 中 一 个 或 多 个 Field 对 象 的 值 之 前 ， 则 
WillChangeField 和 FieldChangeComplete | 调用 WillChangeField 方法 。 
(RecordsetEvent) 方法 在 挂 起 操作 更 改 一 个 或 多 个 Field 对象 的 值 之 后 ， 则 调用 
FieldChangeComplete 方法 。 
在 Recordset 中 一 个 或 多 个 记录 ( 行 ) 发 生 更 改 之 前 ， 将 调用 
WillChangeRecord 和 RecordChange| WillChangeRecord 方法 。 
Complete (RecordsetEvent) 方法 在 一 个 或 多 个 记录 发 生 更 改 之 后 ， 将 调用 RecordChangeComplete 
方法 。 
WillChangeRecordset 和 Recordset| 在 挂 起 操作 更 改 Recordset 之 前 调用 WillChangeRecordset 方法 。 
ChangeComplete (RecordsetEvent) 方法 在 Recordset 已 经 更 改 之 后 , 将 调用 RecordsetChangeComplete 方法 。 


在 连接 开始 之 前 调用 WillConnect 方法 。 在 挂 起 连接 中 使 用 的 参数 


WillConnect (ConnectionEvent) 方法 作为 输入 参数 提供 ， 并 可 以 在 方法 返回 之 前 更 改 。 该 方法 可 以 返 
可 取消 挂 起 连接 的 请 求 。 
WillExecute 方法 在 对 该 连接 执行 挂 起 命令 之 前 调用 ， 使 用 户 能 够 
WillExecute (ConnectionEvent) 方法 检查 和 修改 挂 起 执行 的 参数 。 该 方法 可 以 返回 取消 挂 起 连接 的 请 
WillMove 和 MoveComplete (Recordset | 在 挂 起 操作 更 改 Recordset 中 的 当前 位 置 之 前 , 调用 WillMove 方 法 。 
Event) 方法 Recordset 中 的 当前 位 置 发 生 更 改 之 后 ， 调 用 MoveComplete 方法 。 
9. ADO 属性 
表 附 录 D-9 
属性 说 明 
AbsolutePage 指定 当前 记录 所 在 的 页 。 
AbsolutePosition 指定 Recordset 对 象 当前 记录 的 序号 位 置 。 
ActiveCommand 指示 创建 关联 的 Recordset 对 象 的 Command 对 象 。 
ActiveConnection 指示 指定 的 Command 或 Recordset 对 象 当前 所 属 的 Connection 对 象 。 
ActualSize 指示 字段 的 值 的 实际 长 度 。 
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属性 

Attributes 指示 对 象 的 一 项 或 多 项 特性 。 

BOF 和 EOF BOF 指示 当前 记录 位 置 位 于 Recordset 对 象 的 第 一 个 记录 之 前 。 
EOF 指示 当前 记录 位 置 位 于 Recordset 对 象 的 最 后 一 个 记录 之 后 。 

Ba 返回 唯一 标识 Recordset 对 象 中 当前 记录 的 书签 ， 或 者 将 Recordset 对 象 的 当前 
记录 设置 为 由 有 效 书签 所 标识 的 记录 。 

CacheSize 指示 缓存 在 本 地 内 存 中 的 Recordset 对 象 的 记录 数 。 

CommandText 包含 要 根据 提供 者 发 送 的 命令 文本 。 

CommandTimeout 指示 在 终止 尝试 和 产生 错误 之 前 执行 命令 期 间 需 等 待 的 时 间 。 

CommandType 指示 Command 对 象 的 类 型 。 

Connect 设置 或 返回 对 其 运行 查询 和 更 新 操作 的 数据 库 名 称 。 

ConnectionString 包含 用 于 建立 连接 数据 源 的 信息 。 

ConnectionTimeout 指示 在 终止 尝试 和 产生 错误 前 建立 连接 期 间 所 等 待 的 时 间 。 

Count 指示 集合 中 对 象 的 数目 。 

CursorLocation 设置 或 返回 游标 服 置 务 的 位 。 


CursorType 
DataMember 
DataSource 
DefaultDatabase 
DefinedSize 


Description 
Direction 


EditMode 
ExecuteOptions (RDS) 
FetchOptions 

Filter 

FilterColumn (RDS) 
FilterCriterion (RDS) 


指示 在 Recordset 对 象 中 使 用 的 游标 类 型 。 

指定 要 从 DataSource 属性 所 引用 的 对 象 中 检索 的 数据 成 员 的 名 称 。 
指定 所 包含 的 数据 将 被 表示 为 Recordset 对 象 的 对 象 。 

指示 Connection 对 象 的 默认 数据 库 。 

指示 Field 对 象 所 定义 的 大 小 。 


描述 Error 对 象 。 


指示 Parameter 表示 的 是 输入 参数 、 输 出 参数 还 是 既是 输出 又 是 输入 参数 ， 或 
该 参数 是 否 为 存储 过 程 返回 的 值 。 


指示 当前 记录 的 编辑 状态 。 


指示 是 否 启用 异步 执行 。 


设置 或 返回 异步 获取 的 类 型 。 

指示 Recordset 的 数据 筛选 条 件 。 

设置 或 返回 计算 筛选 条 件 的 列 。 

设置 或 返回 在 筛选 值 中 使 用 的 计算 操作 符 。 


FilterValue (RDS) 


HelpContext 和 HelpFile 


设置 或 返回 用 于 筛选 记录 的 值 。 


指示 与 Error 对 象 关联 的 帮助 文件 和 主题 。 
HelpContextID- 返回 帮助 文件 中 主题 的 、 按 长 整 型 值 返回 的 上 下 文 ID。 
HelpFile - 返回 字符 串 ， 用 于 计算 帮助 文件 的 完整 分 解 路 径 。 


Index 


指示 对 Recordset 对 象 当前 生效 的 索引 的 名 称 。 


InternetTimeout (RDS) 


指示 请 求 超时 前 将 等 待 的 毫秒 数 。 


IsolationLevel 
LockType 


指示 Connection 对 象 的 隔离 级 别 。 
指示 编辑 过 程 中 对 记录 使 用 的 锁定 类 型 。 


MarshalOptions 


指示 要 被 调度 返回 服务 器 的 记录 。 


MaxRecords 
Mode 


Name 


指示 通过 查询 返回 Recordset 的 记录 的 最 大 数目 。 
指示 用 于 更 改 Connection 中 数据 的 可 用 权限 。 


指示 对 象 的 名 称 。 


NativeError 


指示 针对 给 定 Error 对 象 的 特定 提供 者 的 错误 代码 。 


Number 
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指示 用 于 唯一 标识 Error 对 象 的 数字 。 
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续 表 
属性 说 明 
NumericScale 指示 Parameter 或 Field 对 象 中 数字 值 的 范围 。 
Optimize 指示 是 否 应 该 在 该 字段 上 创建 索引 。 
OriginalValue 指示 发 生 任何 更 改 前 已 在 记录 中 存在 的 Field 的 值 。 
PageCount 指示 Recordset 对 象 包含 的 数据 页 数 。 
PageSize 指示 Recordset 中 一 页 所 包含 的 记录 数 。 
Precision 指示 在 Parameter 对 象 中 数字 值 或 数字 Field 对 象 的 精度 。 
Prepared 指示 执行 前 是 否 保存 命令 的 编译 版 本 。 
Provider 指示 Connection 对 象 提供 者 的 名 称 。 
RecordCount 指示 Recordset 对 象 中 记录 的 当前 数目 。 


RecordsetandSourceRecordset 
(RDS) 


指示 从 自 定义 业务 对 象 中 返回 的 ADOR.Recordset 对 象 。 


ReadyState(RDS) 在 RDS.DataControl 对 象 获取 数据 到 它 的 Recordset 对 象 中 时 反映 其 进度 。 
Server (RDS) 设置 或 返回 Internet Information Server (IIS) 名 称 和 通讯 协议 。 
Size 指示 Parameter 对 象 的 最 大 大 小 〈 按 字 节 或 字符 ) 。 
Soit 指定 一 个 或 多 个 Recordset 以 之 排序 的 字段 名 ， 并 指定 按 升序 还 是 降序 对 字段 
进行 排序 。 
SortColulmn (RDS) 设置 或 返回 记录 以 之 排序 的 列 。 
SortDirection (RDS) 设置 或 返回 用 于 指示 排序 顺序 是 升序 还 是 降序 的 布尔 型 值 。 
Source (ADO Error) 指示 产生 错误 的 原始 对 象 或 应 用 程序 的 名 称 。 
Uno ADO Rochrdset) ee 对 象 (Command 对 象 、SQL 语句 、 表 的 名 称 或 存储 过 程 ) 中 数 
SQL (RDS) 设置 或 返回 用 于 检索 Recordset 的 查询 字符 串 。 
SQLState 指示 给 定 Error 对 象 的 SQL 状态 。 
i 对 所 有 可 应 用 对 和 象 ， 说 明 其 对 象 状态 是 打开 或 是 关闭 。 本 
对 执行 异步 方法 的 Recordset 对 象 , 说 明 当前 的 对 象 状态 是 连接 、 执行 或 是 获取 。 
Status 指示 有 关 批 更 新 或 其 他 大 量 操作 的 当前 记录 的 状态 。 
在 分 级 Recordset 对 象 中 ， 指 示 当 父 行 位 置 更 改 时 ， 对 基本 子 记 录 ( 即 “ 子 集 ”) 
yy 的 引用 是 否 更 改 。 
Type 指示 Parameter、Field 或 Property 对 象 的 操作 类 型 或 数据 类 型 。 
UnderlyingValue 指示 数据 库 中 Field 对 象 的 当前 值 。 
Value 指示 赋 给 Field、Parameter 或 Property 对 象 的 值 。 
Version 指示 ADO 版 本 号 。 
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1. JavaScript 函数 〈 如 表 E-1 所 示 ) 
表 E-1 JavaScript 函数 


描述 语言 要 素 
器 文件 中 的 Automation 对 象 的 引用 GetObject 函数 
可 代表 所 使 用 的 脚本 语言 的 字符 串 ScriptEngine 函数 


所 使 用 的 脚本 引擎 的 编译 版 本 号 


ScriptEngineBuildVersion 函数 


回 所 使 用 的 脚本 引擎 的 主 版 本 号 


ScriptEngineMajorVersion 函数 


已 


回 所 使 用 的 脚本 引擎 的 次 版 本 号 


2. JavaScript 方法 〈 如 表 F-2 所 示 ) 
表 E-2 JavaScript 方法 


ScriptEngineMinorVersion 函数 


描 述 语言 要 素 
加 一 个 数 的 绝对 值 abs 方法 
加 一 个 数 的 反 余弦 acos 方法 
对 象 的 指定 文本 两 端 加 上 一 个 带 name 属性 的 HTML 锚 点 anchor 方法 
加 一 个 数 的 反正 弦 asin 方法 
回 一 个 数 的 反正 切 atan 方法 
回 从 和 轴 到 点 〈yYx) 的 角度 〈 以 弧度 为 单位 ) atan2 方法 
回 一 个 表明 枚 举 算 子 是 否 处 于 集合 结束 处 的 Boolean 值 atEnd 方法 
String 对 象 的 文本 两 端 加 入 HTML 的 <big> 标识 big 方法 
HTML 的 <Blink> 标签 添加 到 String 对 象 中 的 文本 两 端 blink 方法 
HTML 的 <B> 标签 添加 到 String 对 象 中 的 文本 两 端 bold 方法 
可 大 于 或 等 于 其 数值 参数 的 最 小 整数 ceil 方 法 
器 位 于 指定 索引 位 置 的 字符 charAt 方 法 
器 指定 字符 的 Unicode 编码 charCodeAt 方法 
一 个 正则 表达 式 编译 为 内 部 格式 compile 方法 


可 一 个 由 两 个 数组 合并 组 成 的 新 数组 
回 一 个 包含 给 定 的 两 个 字符 串 的 连接 的 String 对 象 


concat 方法 (Array) 
concat 方法 (String) 


回 一 个 数 的 余弦 


cos 方法 


可 VBArray 的 维 数 


dimensions 方法 


String 对 象 编码 ， 以 便 在 所 有 计算 机 上 都 能 阅读 escape 方法 
JavaScript 代码 求 值 然 后 执行 之 eval 方法 
指定 字符 串 中 执行 一 个 匹配 查找 exec 方法 
可 e〈 自 然 对 数 的 底 ) 的 震 exp 方法 
HTML 的 <TT> 标签 添加 到 String 对 象 中 的 文本 两 端 fixed 方法 
可 小 于 或 等 于 其 数值 参数 的 最 大 整数 floor 方法 

将 HTML 带 Color 属性 的 <Font> 标签 添加 到 String 对 象 中 的 文本 两 端 ” | fontcolor 方法 


o O - 
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续 表 
描述 语言 要 素 
将 HTML 带 Size 属性 的 <Font 标签 添加 到 String 对 象 中 的 文本 两 端 fontsize 方法 
返回 Unicode 字符 值 的 字符 串 fromCharCode 方法 
使 用 当地 时 间 返 回 Date 对 象 的 月 份 日 期 值 getDate 方法 
使 用 当地 时 间 返 回 Date 对 象 的 星期 几 getDay 方法 
使 用 当地 时 间 返 回 Date 对 象 的 年 份 getFullYear 方法 
使 用 当地 时 间 返 回 Date 对 象 的 小 时 值 getHours 方法 
返回 位 于 指定 位 置 的 项 getItem 方法 
使 用 当地 时 间 返 回 Date 对 象 的 毫秒 值 getMilliseconds 方法 
使 用 当地 时 间 返 回 Date 对 象 的 分 钟 值 getMinutes 方法 
使 用 当地 时 间 返 回 Date 对 象 的 月 份 getMonth 方法 
使 用 当地 时 间 返 回 Date 对 象 的 秒 数 getSeconds 方法 
返回 Date 对 象 中 的 时 间 getTime 方法 
返回 主机 的 时 间 和 全 球 标准 时 间 (UTC) 之 间 的 差 ( 以 分 钟 为 单位 ) getTimezoneOffset 方法 
使 用 全 球 标准 时 间 (UTC) 返回 Date 对 象 的 日 期 值 getUTCDate 方法 
使 用 全 球 标准 时 间 (UTC) 返回 Date 对 象 的 星期 几 getUTCDay 方法 
使 用 全 球 标准 时 间 (UTC) 返回 Date 对 象 的 年 份 getUTCFullYear 方法 
使 用 全 球 标准 时 间 (UTC) 返回 Date 对 象 的 小 时 数 getUTCHours 方法 


使 用 全 球 标准 时 间 (UTC) 返回 Date 对 象 的 毫秒 数 
使 用 全 球 标准 时 间 (UTC) 返回 Date 对 象 的 分 钟 数 
使 用 全 球 标 准时 间 (UTC) 返回 Date 对 象 的 月 份 值 


getUTCMilliseconds 方法 
getUTCMinutes 方法 
getUTCMonth 方法 


使 用 全 球 标准 时 间 (UTC) 返回 Date 对 象 的 秒 数 getUTCSeconds 方法 
返回 Date 对 象 中 的 VT_DATE getVarDate 方法 
返回 Date 对 象 中 的 年 份 getYear 方法 
返回 在 String 对 象 中 第 一 次 出 现 子 字符 串 的 字符 位 置 indexOf 方法 
返回 一 个 Boolean 值 ， 表 明 某 个 给 定 的 数 是 否 是 有 穷 的 isFinite 方法 
返回 一 个 Boolean 值 ， 表 明 某 个 值 是 否 为 保留 值 NaN〈 不 是 一 个 数 ) isNaN 方法 

将 HIML 的 <IT> 标签 添加 到 String 对 象 中 的 文本 两 端 italics 方法 
返回 集合 中 的 当前 项 item 方法 

返回 一 个 由 数组 中 的 所 有 元 素 连接 在 一 起 的 String 对 象 join 方法 
返回 在 String 对 象 中 子 字符 串 最 后 出 现 的 位 置 lastIndexOf 方法 
返回 在 VBArray 中 指定 维 数 所 用 的 最 小 索引 值 lbound 方法 
将 带 HREF 属性 的 HTML 锚 点 添加 到 String 对 象 中 的 文本 两 端 link 方法 

返回 某 个 数 的 自然 对 数 log 方法 

使 用 给 定 的 正则 表达 式 对 象 对 字符 串 进行 查找 ， 并 将 结果 作为 数组 返回 “|match 方法 
返回 给 定 的 两 个 表达 式 中 的 较 大 者 max 方法 

返回 给 定 的 两 个 数 中 的 较 小 者 min 方法 

将 集合 中 的 当前 项 设置 为 第 一 项 moveFirst 方法 
将 当前 项 设置 为 集合 中 的 下 一 项 moveNext 方法 
对 包含 日 期 的 字符 串 进行 分 析 ， 并 返回 该 日 期 与 1970 年 1 月 1 日 零点 之 

间 相差 的 毫秒 数 加 

返回 从 字符 串 转换 而 来 的 浮 点 数 parseFloat 方法 
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全 
O° 
网 页 设计 与 网 站 建设 完全 实战 手册 
续 表 
描 述 语言 要 素 
返回 从 字符 串 转换 而 来 的 整数 parseInt 方法 
返回 一 个 指定 寡 次 的 底 表达 式 的 值 pow 方法 
返回 一 个 0 一 1 的 伪 随 机 数 Tandom 方法 
返回 根据 正则 表达 式 进 行文 字 替 换 后 的 字符 串 的 副本 replace 方法 
返回 一 个 元 素 反 序 的 Array 对 象 reverse 方法 
将 一 个 指定 的 数值 表达 式 舍 入 到 最 近 的 整数 并 将 其 返回 round 方法 
返回 与 正则 表达 式 查找 内 容 匹 配 的 第 一 个 子 字符 串 的 位 置 search 方法 
使 用 当地 时 间 设 置 Date 对 象 的 数值 日 期 setDate 方法 
使 用 当地 时 间 设 置 Date 对 象 的 年 份 setFullYear 方法 
使 用 当地 时 间 设 置 Date 对 象 的 小 时 值 setHours 方法 
使 用 当地 时 间 设 置 Date 对 象 的 毫秒 值 setMilliseconds 方法 
使 用 当地 时 间 设 置 Date 对 象 的 分 钟 值 setMinutes 方法 
使 用 当地 时 间 设 置 Date 对 象 的 月 份 setMonth 方法 
使 用 当地 时 间 设 置 Date 对 象 的 秒 值 setSeconds 方法 
设置 Date 对 象 的 日 期 和 时 间 setTime 方法 
使 用 全 球 标准 时 间 (UTC) 设置 Date 对 象 的 数值 日 期 setUTCDate 方法 
使 用 全 球 标准 时 间 (UTC) 设置 Date 对 象 的 年 份 setUTCFullYear 方法 
使 用 全 球 标准 时 间 (UTC) 设置 Date 对 象 的 小 时 值 setUTCHours 方法 
使 用 全 球 标准 时 间 (UTC) 设置 Date 对 象 的 毫秒 值 setUTCMilliseconds 方法 
使 用 全 球 标准 时 间 (UTC) 设置 Date 对 象 的 分 钟 值 setUTCMinutes 方法 
使 用 全 球 标准 时 间 (UTC) 设置 Date 对 象 的 月 份 setUTCMonth 方法 
使 用 全 球 标准 时 间 (UTC) 设置 Date 对 象 的 秒 值 setUTCSeconds 方法 
使 用 Date 对 象 的 年 份 setYear 方法 
返回 一 个 数 的 正弦 sin 方法 
返回 数组 的 一 个 片段 slice 方法 (Array) 
返回 字符 串 的 一 个 片段 Slice 方 法 (String) 
将 HTML 的 <SMALL> 标签 添加 到 String 对 象 中 的 文本 两 端 small 方法 
返回 一 个 元 素 被 排序 了 的 Array 对 象 sort 方法 
将 一 个 字符 串 分 割 为 子 字符 串 ， 然 后 将 结果 作为 字符 串 数组 返回 split 方法 
返回 一 个 数 的 平方 根 sqrt 方法 
将 HIML 的 <STRIKE> 标签 添加 到 String 对 象 中 的 文本 两 端 strike 方法 
将 HTML 的 <SUB> 标签 放置 到 String 对 象 中 的 文本 两 端 Sub 方法 
返回 一 个 从 指定 位 置 开始 并 具有 指定 长 度 的 子 字符 串 substr 方法 
返回 位 于 String 对 象 中 指定 位 置 的 子 字符 串 substring 方法 
将 HIML 的 <SUP> 标识 放置 到 String 对 象 中 的 文本 两 端 sup 方法 
返回 一 个 数 的 正切 tan 方法 
返回 一 个 Boolean 值 ， 表 明 在 被 查找 的 字符 串 中 是 否 存在 某 个 模式 test 方法 
返回 一 个 从 VBArray 转换 而 来 的 标准 JavaScript 数组 toArray 方法 
返回 一 个 转换 为 使 用 格林 尼 治 标准 时 间 〈GMT) 的 字符 串 的 日 期 toGMTString 方法 
返回 一 个 转换 为 使 用 当地 时 间 的 字符 串 的 日 期 toLocaleString 方法 
返回 一 个 所 有 的 字母 字符 都 被 转换 为 小 写字 母 的 字符 串 toLowerCase 方法 


> 
© 
~ 


描 述 语言 要 素 
返回 一 个 对 象 的 字符 串 表 示 toString 方法 
返回 一 个 所 有 的 字母 字符 都 被 转换 为 大 写字 母 的 字符 串 toUpperCase 方法 
返回 一 个 转换 为 使 用 全 球 标准 时 间 (UTC) 的 字符 串 的 日 期 toUTCString 方法 
返回 在 VBArray 的 指定 维 中 所 使 用 的 最 大 索引 值 ubound 方法 
对 用 escape 方法 编码 的 String 对 象 进行 解码 unescape 方法 
返回 1970 年 1 月 1 日 零点 的 全 球 标准 时 间 (UTC) (或 GMT) 与 指定 | urc 方法 
日 期 之 间 的 毫秒 数 
返回 指定 对 象 的 原始 值 valueOf 方法 

3. JavaScript 对 象 〈 如 表 E-3 所 示 ) 
表 E-3 JavaScript 对 象 

描 述 语言 要 素 
启用 并 返回 一 个 Automation 对 象 的 引用 ActiveXObject 对 象 
提供 对 创建 任何 数据 类 型 的 数组 的 支持 Array 对 象 
创建 一 个 新 的 Boolean 值 Boolean 对 象 
提供 日 期 和 时 间 的 基本 存储 和 检索 Date 对 象 
存储 数据 键 、 项 对 的 对 象 Dictionary 对 象 
提供 集合 中 的 项 的 枚 举 Enumerator 对 象 
包含 在 运行 JavaScript 代码 时 发 生 的 错误 的 有 关 信 息 Error 对 象 
提供 对 计算 机 文件 系统 的 访问 FileSystemObject 对 象 
创建 一 个 新 的 函数 Function 对 象 
是 一 个 内 部 对 象 ， 目 的 是 将 全 局 方法 集中 在 一 个 对 象 中 Global 对 象 
一 个 内 部 对 象 ， 提 供 基本 的 数学 函数 和 常数 Math 对 象 
表示 数值 数据 类 型 和 提供 数值 常数 的 对 象 Number 对 象 
提供 所 有 的 JavaScript 对 象 的 公共 功能 Object 对 象 
存储 有 关 正则 表达 式 模式 查找 的 信息 RegExp 对 象 
包含 一 个 正则 表达 式 模式 正则 表达 式 对 象 
提供 对 文本 字符 串 的 操作 和 格式 处 理 ， 判 定 在 字符 串 中 是 否 存在 某 个 子 string 对 象 
字符 串 及 确定 其 位 置 
提供 对 VisualBasic 安全 数组 的 访问 VBArray 对 象 

4. JavaScript 运算 符 ( 如 表 E-4 所 示 ) 
表 E-4 JavaScript 运算 符 

描 述 语言 要 素 
将 两 个 数 相 加 或 连接 两 个 字符 串 加 法 运算 符 (+) 
将 一 个 值 赋 给 变量 赋值 运算 符 (=) 
对 两 个 表达 式 执行 按 位 与 操作 按 位 与 运算 符 (&) 


将 一 个 表达 式 的 各 位 向 左 移 


按 位 左 移 运算 符 (<<) 


对 一 个 表达 式 执行 按 位 取 非 〈 求 非 ) 操作 


按 位 取 非 运算 符 (~) 


对 两 个 表达 式 指定 按 位 或 操作 


将 一 个 表达 式 的 各 位 向 右 移 ， 保 持 符号 不 变 


按 位 或 运算 符 〈|) 
按 位 右 移 运算 符 (>>) 
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续 表 


描述 语言 要 素 
对 两 个 表达 式 执 行 按 位 异 或 操作 按 位 异 或 运算 符 〈^) 
使 两 个 表达 式 连 续 执行 去 号 运算 符 (.) 
返回 Boolean 值 ， 表 示 比 较 结果 比较 运算 符 
复合 赋值 运算 符 列表 复合 赋值 运算 符 
根据 条 件 执行 两 个 表达 式 之 一 条 件 〈 三 元 ) 运算 符 〈?:) 
将 变量 减 一 递减 运算 符 (一 ) 
删除 对 象 的 属性 ， 或 删除 数组 中 的 一 个 元 素 delete 运算 符 
将 两 个 数 相 除 并 返回 一 个 数值 结果 除法 运算 符 〈/) 
比较 两 个 表达 式 ， 看 是 否 相等 相等 运算 符 〈 一 ) 
比较 两 个 表达 式 ， 看 一 个 是 否 大 于 另 一 个 大 于 运算 符 (>) 
比较 两 个 表达 式 ， 看 是 否 一 个 小 于 另 一 个 小 于 运算 符 (<) 
比较 两 个 表达 式 ， 看 是 否 一 个 小 于 等 于 另 一 个 小 于 等 于 运算 符 (<=) 
对 两 个 表达 式 执行 逻辑 与 操作 逻辑 与 运算 符 (&&) 
对 表达 式 执行 逻辑 非 操作 逻辑 非 运算 符 (!) 
对 两 个 表达 式 执行 逻辑 或 操作 逻辑 或 运算 符 (||) 
将 两 个 数 相 除 ， 并 返回 余数 取 模 运算 符 〈%) 
将 两 个 数 相 乘 乘法 运算 符 〈*) 
创建 一 个 新 对 象 new 运算 符 
比较 两 个 表达 式 ， 看 是 否 具有 不 相等 的 值 或 数据 类 型 不 同 非 严 格 相等 运算 符 〈! 一 ) 
包含 JavaScript 运算 符 的 执行 优先 级 信息 的 列表 运算 符 优先 级 
对 两 个 表达 式 执行 减法 操作 减法 运算 符 (-) 
返回 一 个 表示 表达 式 的 数据 类 型 的 字符 串 typeof 运算 符 


表示 一 个 数值 表达 式 的 相反 数 
在 表达 式 中 对 各 位 进行 无 符号 右 移 
避免 一 个 表达 式 返回 值 


5. JavaScript 属性 〈 如 表 E-5 所 示 ) 


表 E-5 JavaScript 属性 


一 元 取 相 反 数 运算 符 (-) 
无 符号 右 移 运 算 符 (>>>) 
void 运算 符 


描述 语言 要 素 
返回 在 模式 匹配 中 找到 的 最 近 的 9 条 记录 $1...$9Properties 
返回 一 个 包含 传递 给 当前 执行 函数 的 每 个 参数 的 数组 arguments 属性 
返回 调用 当前 函数 的 函数 引用 caller 属性 
指定 创建 对 象 的 函数 constructor 属性 
返回 或 设置 关于 指定 错误 的 描述 字符 串 description 属性 
返回 Euler 常数 ， 即 自然 对 数 的 底 王 属性 
返回 在 字符 串 中 找到 的 第 一 个 成 功 匹 配 的 字符 位 置 index 属性 
返回 numberpositiue_infinity 的 初始 值 Infinity 属性 
返回 进行 查找 的 字符 串 input 属性 
返回 在 字符 串 中 找到 的 最 后 一 个 成 功 匹 配 的 字符 位 置 lastIndex 属性 
返回 比 数组 中 所 定义 的 最 高 元 素 大 1 的 一 个 整数 length 属性 (Array) 
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o O XA 
附录 玉 JavaScript 语法 手册 
续 表 
描 述 语言 要 素 
返回 为 函数 所 定义 的 参数 个 数 length 属性 (Function) 
返回 String 对 象 的 长 度 length 属性 (String) 
返回 2 的 自然 对 数 LN2 属性 
返回 10 的 自然 对 数 LN10 属性 
返回 以 2 为 底 的 e。( 即 Euler 常数 ) 的 对 数 LOG2E 属性 
返回 以 10 为 底 的 e ( 即 Euler 常数 ) 的 对 数 LOG10E 属性 
返回 在 JavaScript 中 能 表示 的 最 大 值 Max_value 属性 
返回 在 JavaScript 中 能 表示 的 最 接近 零 的 值 Min_value 属性 


返回 特殊 值 NaN， 表 示 某 个 表达 式 不 是 一 个 数 


NaN 属性 (Global) 


返回 特殊 值 (NaN) ， 表 示 某 个 表达 式 不 是 一 个 数 
回 比 在 JavaScript 中 能 表示 的 最 大 的 负数 (-NumberMAX VALUE) 更 
值 


NaN 属性 (Number) 


Negatiue_infinity 属性 


或 设置 与 特定 错误 关联 的 数值 
圆周 与 其 直径 的 比值 ， 约 等 于 3.141592653589793 
比 在 JavaScript 中 能 表示 的 最 大 数 (NumberMAX_VALUE) 更 大 


对 象 类 的 原型 引用 

正则 表达 式 模 式 的 文本 的 副本 

0.5 的 平方 根 ， 即 1 除 以 2 的 平方 根 
2 的 平方 根 


回 | 回 | 刻 回 | 回 | 回 | 公 瑟 


回 


这 
回 


6. JavaScript 语句 〈 如 表 E-6 所 示 ) 
表 E-6 JavaScript 语句 


描述 
终止 当前 循环 ， 或 者 如 果 与 一 个 label 语句 关联 ， 则 终止 相关 联 的 语句 


Number 属性 
PI 属性 


Positive_infinity 属性 
Prototype 属性 
source 属性 

Sqrtl_2 属性 

Sqrt2 属性 


语言 要 素 
break 语句 


包含 在 try 语句 块 中 的 代码 发 生 错误 时 执行 的 语句 
激活 条 件 编译 支持 


catch 语句 
@cc on 语句 


使 单行 注释 被 JavaScript 语法 分 析 器 忽略 


// (单行 注释 语句 ) 


使 多 行 注释 被 JavaScript 语法 分 析 器 忽略 


放 .*/ (多 行 注释 语句 ) 


停止 循环 的 当前 迭代 ， 并 开始 一 次 新 的 迭代 continue 语句 
先 执行 一 次 语句 块 ， 然 后 重复 执行 该 循环 ， 直 至 条 件 表达 式 的 值 为 false ”| do…while 语句 
只 要 指定 的 条 件 为 tue， 就 一 直 执行 语句 块 for 语句 

对 应 于 对 象 或 数组 中 的 每 个 元 素 执 行 一 个 或 多 个 语句 for.in 语句 


声明 一 个 新 的 函数 function 语句 
根据 表达 式 的 值 ， 有 条 件 地 执行 一 组 语句 @ 这 语句 
根据 表达 式 的 值 ， 有 条 件 地 执行 一 组 语句 让 .else 语句 
给 语句 提供 一 个 标识 符 Labeled 语句 


从 当前 函数 退出 并 从 该 函数 返回 一 个 值 


retur 语句 


创建 用 于 条 件 编译 语句 的 变量 


@set 语句 


当 指 定 的 表达 式 的 值 与 某 个 标签 匹配 时 ， 即 执行 相应 的 一 个 或 多 个 语句 
对 当前 对 象 的 引用 


switch 语句 
this 语句 
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y 
yo 9 个 网 页 设计 与 网 站 建设 完全 实战 手册 


产生 一 个 可 由 try...catch 语句 处 理 的 错误 条 件 


实现 JavaScript 的 错误 处 理 try 语句 
声明 一 个 变量 var 语句 
执行 语句 直至 给 定 的 条 件 为 false [while 语句 


确定 一 个 语句 的 默认 对 象 with 语句 


